/* css/pages/wizard_ssl.css
 * SSL-wizard-specific styles (Fase 29) -- loaded alongside the shared css/wizard-shell.css and
 * css/pages/order_domain.css. Cert-type tiles reuse the already-generic
 * .domain-ns-choice-row1/.domain-ns-choice-row2/.wz-plan-specs/.wz-tile-price rules from
 * order_domain.css (same tiles VPS already uses), so only the brand-accent hover/active/icon
 * overrides live here -- same pattern as wizard_vps.css/wizard_hosting.css.
 */

.wizard-shell .domain-ns-choice-card:hover {
    border-color: var(--wz-accent);
    box-shadow: 0 0 0 .1rem rgba(var(--wz-accent-rgb), .1);
}
.wizard-shell .domain-ns-choice-card.is-active {
    border-color: var(--wz-accent);
    box-shadow: 0 0 0 .15rem rgba(var(--wz-accent-rgb), .15);
}
.wizard-shell .domain-ns-choice-icon {
    background: rgba(var(--wz-accent-rgb), .14);
    color: var(--wz-accent);
}

/* Small sub-section heading inside the "Certificate details" step (contact mini-form vs. the
   validation/CSR fields below it) -- one size down from the step's own <h2>. */
.wz-subheading {
    font-size: 16px;
    font-weight: 700;
    margin: 24px 0 4px;
}

/* Step 2 (Certificate details) used a few plain Bootstrap defaults -- the autocert note
   (.alert-info) and the "Generate now"/"check emails" buttons (.btn-outline-primary/
   -secondary) -- that never got the accent treatment the rest of the wizard already has via
   wizard-shell.css's .btn-primary/.btn-outline-info overrides. Brought in line here rather
   than in the shared file, since these Bootstrap classes are only used on this step. */
.wizard-shell .alert-info {
    background: rgba(var(--wz-accent-rgb), .14);
    border-color: rgba(var(--wz-accent-rgb), .4);
    color: var(--wz-ink);
}
.wizard-shell .btn-outline-primary {
    color: var(--wz-accent);
    border-color: var(--wz-accent);
}
.wizard-shell .btn-outline-primary:hover,
.wizard-shell .btn-outline-primary:focus {
    color: #fff;
    background-color: var(--wz-accent);
    border-color: var(--wz-accent);
    box-shadow: none;
}
.wizard-shell .btn-outline-secondary {
    color: var(--wz-ink);
    border-color: #d9d4cb;
}
.wizard-shell .btn-outline-secondary:hover,
.wizard-shell .btn-outline-secondary:focus {
    color: var(--wz-ink);
    background-color: var(--wz-bg);
    border-color: #c9c3b8;
    box-shadow: none;
}