/* ============================================================================
   DurDurTec — shared component layer

   Implements spec v2 section 7. Sections consume these classes; they must not
   restyle locally. Every value resolves through a token: no literal hex,
   radius, duration or font-size appears in this file.

   .dt-card, .dt-art, .dt-art-float and .dt-card-price are NOT defined here.
   They live in durdurtec-tokens.css as shape primitives and are consumed as
   written. Redefining .dt-card here is exactly what produced the v1/v2
   collision that left every card wearing a hairline border on top of its
   shadow -- two definitions, the later one winning silently.
   ============================================================================ */

/* --- Button — spec 7 -------------------------------------------------------
   Primary: citron fill, white text, 600, 14px, radius 10, small shadow.
   Hover citron-800 plus a 1px lift. Secondary: white fill, hairline border,
   ink text; hover raises the border to brand-700 and adds the same shadow.
   One accent per view: .dt-btn--primary marks the single primary action. */
.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-space-2);
  padding: var(--dt-space-3) var(--dt-space-5);
  border: var(--dt-border-width) solid transparent;
  border-radius: var(--dt-radius-sm);
  font-family: var(--dt-font-sans);
  font-size: var(--dt-text-sm);
  font-weight: var(--dt-weight-heading);
  line-height: var(--dt-leading-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dt-duration-std) var(--dt-ease),
              border-color    var(--dt-duration-std) var(--dt-ease),
              box-shadow      var(--dt-duration-std) var(--dt-ease),
              transform       var(--dt-duration-std) var(--dt-ease),
              color           var(--dt-duration-std) var(--dt-ease);
}
.dt-btn--primary {
  background: var(--dt-citron-700);
  border-color: var(--dt-citron-700);
  color: var(--dt-ink-0);
  box-shadow: var(--dt-shadow-sm);
}
.dt-btn--primary:hover,
.dt-btn--primary:focus-visible {
  background: var(--dt-citron-800);
  border-color: var(--dt-citron-800);
  color: var(--dt-ink-0);
  transform: translateY(var(--dt-lift-1));
}
.dt-btn--secondary {
  background: var(--dt-surface-raised);
  border-color: var(--dt-border);
  color: var(--dt-text);
}
.dt-btn--secondary:hover,
.dt-btn--secondary:focus-visible {
  border-color: var(--dt-brand-700);
  box-shadow: var(--dt-shadow-sm);
  transform: translateY(var(--dt-lift-1));
}
.dt-btn--danger {
  background: var(--dt-danger);
  border-color: var(--dt-danger);
  color: var(--dt-ink-0);
  box-shadow: var(--dt-shadow-sm);
}
.dt-btn--sm {
  padding: var(--dt-space-2) var(--dt-space-4);
  font-size: var(--dt-text-xs);
}

/* --- Card link state -------------------------------------------------------
   A card is a block link, not a link phrase, so the underline affordance does
   not belong on it. .dt-card sets text-decoration:none but only at (0,1,0),
   and both theme.min.css and durdurtec.css declare a:hover{underline} at
   (0,1,1) -- higher, so they won every hover. Qualifying with the element
   name matches their weight, and this file loads last, so the card wins.
   The global hover underline is deliberately left intact for inline links. */
a.dt-card:hover,
a.dt-card:focus,
a.dt-card:focus-visible { text-decoration: none; }

/* --- Input — spec 7 --------------------------------------------------------
   Focus adds a citron border plus a 3px ring. Never removed. */
.dt-input {
  inline-size: 100%;
  padding: var(--dt-space-3) var(--dt-space-4);
  border: var(--dt-border-width) solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  background: var(--dt-surface-raised);
  color: var(--dt-text);
  font-family: var(--dt-font-sans);
  font-size: var(--dt-text-sm);
  transition: border-color var(--dt-duration-std) var(--dt-ease),
              box-shadow   var(--dt-duration-std) var(--dt-ease);
}
.dt-input:focus,
.dt-input:focus-visible {
  outline: none;
  border-color: var(--dt-citron-700);
  box-shadow: var(--dt-shadow-focus);
}

/* --- Card grid — spec 3 ----------------------------------------------------
   Cards float on shadows, so the grid distributes space and draws nothing.

   Column count comes from --dt-cols, which each section template derives from
   its own item count. That is what stops a six-item grid rendering 4+2 with
   two dead cells: the template asks for three columns, so it lays out 3x2.
   A remainder row stretches its cells across the full width because the
   columns are 1fr, never a fixed track. No empty cell is ever emitted. */
.dt-cardgrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-grid-gap);
  align-items: stretch;
}
/* flex-grow on every child is what makes a remainder row stretch to fill the
   width instead of leaving dead space, and it is why no empty cell is ever
   emitted to square off a grid. --dt-cols only sets the target per-row
   count; it never forces a track that must then be filled. */
.dt-cardgrid > * {
  flex: 1 1 calc((100% - (var(--dt-cols, 3) - 1) * var(--dt-grid-gap)) / var(--dt-cols, 3));
  min-inline-size: 0;
}

/* --- Two-letter chip — spec 7 ---------------------------------------------
   Replaces an icon in service grids. Zero assets, impossible to break. */
.dt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.2em;
  padding: var(--dt-space-1) var(--dt-space-2);
  background: var(--dt-accent-tint);
  color: var(--dt-citron-800);
  border-radius: var(--dt-radius-xs);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-text-3xs);
  font-weight: var(--dt-weight-ui);
  letter-spacing: var(--dt-tracking-chip);
  text-transform: uppercase;
}

/* --- Notice — spec 7 -------------------------------------------------------
   Tinted background, 3px left bar in the semantic colour, radius 14. */
.dt-notice {
  border-inline-start: var(--dt-bar-width) solid var(--dt-ink-500);
  border-radius: var(--dt-radius-md);
  background: var(--dt-surface-sunken);
  padding: var(--dt-space-4) var(--dt-space-5);
  font-size: var(--dt-text-body);
  line-height: var(--dt-leading-normal);
  color: var(--dt-text);
  text-align: start;
}
.dt-notice--success { border-inline-start-color: var(--dt-success); background: var(--dt-success-bg); }
.dt-notice--warning { border-inline-start-color: var(--dt-warning); background: var(--dt-warning-bg); }
.dt-notice--danger  { border-inline-start-color: var(--dt-danger);  background: var(--dt-danger-bg); }

/* --- Spec table — spec 7 ---------------------------------------------------
   Retained from v1 for VPS and dedicated servers, where a table genuinely
   beats cards. The container floats like any other surface: radius-lg plus
   the card shadow, no outline. Rules inside the table stay hairlines --
   spec 6 scopes --dt-border to "inputs, table rules, dividers only". */
.dt-spectable-wrap {
  background: var(--dt-surface-raised);
  border-radius: var(--dt-radius-lg);
  box-shadow: var(--dt-shadow-card);
  overflow: hidden;
}
.dt-spectable {
  inline-size: 100%;
  border-collapse: collapse;
  background: transparent;
}
.dt-spectable thead th {
  background: var(--dt-surface-sunken);
  color: var(--dt-ink-500);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-text-2xs);
  font-weight: var(--dt-weight-ui);
  letter-spacing: var(--dt-tracking-wide);
  text-transform: uppercase;
  text-align: start;
  padding: var(--dt-space-3) var(--dt-space-4);
}
.dt-spectable tbody td {
  border-block-start: var(--dt-border-width) solid var(--dt-border);
  padding: var(--dt-space-4);
  font-size: var(--dt-text-body);
  color: var(--dt-text);
}
.dt-spectable tbody tr { transition: background-color var(--dt-duration-std) var(--dt-ease); }
.dt-spectable tbody tr:hover { background: var(--dt-surface-sunken); }
.dt-spectable .dt-spectable-plan { font-weight: var(--dt-weight-heading); }
.dt-spectable .dt-spectable-price {
  font-family: var(--dt-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--dt-weight-heading);
  text-align: end;
}
:lang(ar) .dt-spectable thead th { text-transform: none; letter-spacing: var(--dt-tracking-normal); }

/* --- Focus, spec 7 ---------------------------------------------------------
   durdurtec-tokens.css draws the indicator: a soft citron ring via
   --dt-shadow-focus, plus a transparent outline so Windows High Contrast Mode
   still shows one where box-shadow is discarded. It is keyed to
   :focus-visible, so it appears for keyboard and not for a mouse click.

   What it cannot do on its own is suppress the platform ring. theme.min.css
   declares `button:focus { outline: -webkit-focus-ring-color auto 5px }` --
   plain :focus, so it fires on mouse click too, and `auto` is the hard dark
   platform rectangle. That is the FAQ defect: a tight box around the 72px
   header row inside a 150px card.

   Suppressing it is narrowly scoped to :focus:not(:focus-visible) -- the
   pointer case only. Keyboard focus still matches :focus-visible and still
   gets the ring. Focus visibility is never removed, only the duplicate
   platform ring on click. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
/* The card keeps its resting shadow when clicked; the rule above must not
   flatten it. */
.dt-card:focus:not(:focus-visible) { box-shadow: var(--dt-shadow-card); }

/* The FAQ trigger fills its card, so its ring must trace the card's corners
   rather than a tighter box inside them. Declaring .dt-faq-trigger also takes
   the button out of reach of the WHMCS compatibility layer, which was giving
   this class-less button a 6px radius through .dt-main button. */
.dt-faq-trigger { border-radius: var(--dt-radius-lg); }