/*
 * WC Licensee Registration — Frontend Styles
 * ============================================
 * All visual tokens live in :root as CSS custom properties.
 * Override ANY of these in your YOOtheme stylesheet or Customizer → Additional CSS.
 *
 * Example:
 *   :root { --wclr-accent: #e63946; --wclr-radius: 12px; }
 */

:root {
    /* Brand */
    --wclr-accent:          #1a6eb5;
    --wclr-accent-hover:    #155a96;
    --wclr-accent-light:    #e8f1fb;
    /* Neutrals */
    --wclr-bg:              #ffffff;
    --wclr-surface:         #f8f9fa;
    --wclr-border:          #dee2e8;
    --wclr-text:            #1a1d23;
    --wclr-text-muted:      #6b7280;
    --wclr-text-inverse:    #ffffff;
    /* Status — Pending */
    --wclr-pending-bg:      #fffbeb;
    --wclr-pending-border:  #f59e0b;
    --wclr-pending-text:    #92400e;
    /* Status — Active */
    --wclr-active-bg:       #ecfdf5;
    --wclr-active-border:   #10b981;
    --wclr-active-text:     #065f46;
    /* Status — Inactive */
    --wclr-inactive-bg:     #f9fafb;
    --wclr-inactive-border: #9ca3af;
    --wclr-inactive-text:   #374151;
    /* Shape */
    --wclr-radius:          6px;
    --wclr-radius-lg:       10px;
    --wclr-gap:             16px;
    --wclr-field-gap:       20px;
    /* Type */
    --wclr-font-size:       14px;
    --wclr-label-weight:    600;
    --wclr-label-size:      13px;
    /* Motion */
    --wclr-transition:      0.18s ease;
}

/* ── Registration Form ──────────────────────────────────────────────── */
.wclr-reg-fields { margin-top: 8px; }

.wclr-row.wclr-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wclr-gap);
}
@media (max-width: 480px) { .wclr-row.wclr-two-col { grid-template-columns: 1fr; } }

.wclr-field { margin-bottom: var(--wclr-field-gap); }

.wclr-label,
.wclr-reg-fields label {
    display: block;
    font-size: var(--wclr-label-size);
    font-weight: var(--wclr-label-weight);
    color: var(--wclr-text);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.wclr-input {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--wclr-border);
    border-radius: var(--wclr-radius);
    background: var(--wclr-bg);
    color: var(--wclr-text);
    font-size: var(--wclr-font-size);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--wclr-transition), box-shadow var(--wclr-transition);
    -webkit-appearance: none;
    appearance: none;
}
.wclr-input:focus {
    outline: none;
    border-color: var(--wclr-accent);
    box-shadow: 0 0 0 3px rgba(26,110,181,.14);
}

/* Account Type Cards */
.wclr-account-type-field { margin-bottom: var(--wclr-field-gap); }

.wclr-radio-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wclr-gap);
    margin-top: 8px;
}
@media (max-width: 480px) { .wclr-radio-cards { grid-template-columns: 1fr; } }

.wclr-radio-card { position: relative; cursor: pointer; display: block; }
.wclr-radio-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.wclr-card-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 2px solid var(--wclr-border);
    border-radius: var(--wclr-radius-lg);
    background: var(--wclr-bg);
    transition: border-color var(--wclr-transition), background var(--wclr-transition), box-shadow var(--wclr-transition);
}
.wclr-radio-card:hover .wclr-card-inner {
    border-color: var(--wclr-accent);
    background: var(--wclr-accent-light);
}
.wclr-radio-card input:checked ~ .wclr-card-inner {
    border-color: var(--wclr-accent);
    background: var(--wclr-accent-light);
    box-shadow: 0 0 0 3px rgba(26,110,181,.12);
}

.wclr-card-icon {
    display: inline-flex;
    width: 28px; height: 28px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--wclr-surface);
    color: var(--wclr-text-muted);
    font-size: 10px;
    margin-bottom: 4px;
    transition: background var(--wclr-transition), color var(--wclr-transition);
}
.wclr-radio-card input:checked ~ .wclr-card-inner .wclr-card-icon {
    background: var(--wclr-accent);
    color: var(--wclr-text-inverse);
}

.wclr-card-title { font-size: 15px; font-weight: 700; color: var(--wclr-text); }
.wclr-card-desc  { font-size: 12px; color: var(--wclr-text-muted); line-height: 1.4; }

/* Licensee Number — animated show/hide */
.wclr-licensee-number-field {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height .3s ease, opacity .25s ease, margin .25s ease;
}
.wclr-licensee-number-field.wclr-visible {
    max-height: 160px;
    opacity: 1;
    margin-bottom: var(--wclr-field-gap);
}

.wclr-field-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--wclr-text-muted); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.wclr-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}
.wclr-badge--pending  { background: var(--wclr-pending-bg);  color: var(--wclr-pending-text);  border-color: var(--wclr-pending-border); }
.wclr-badge--active   { background: var(--wclr-active-bg);   color: var(--wclr-active-text);   border-color: var(--wclr-active-border); }
.wclr-badge--inactive { background: var(--wclr-inactive-bg); color: var(--wclr-inactive-text); border-color: var(--wclr-inactive-border); }

/* ── My Account Dashboard Banner ───────────────────────────────────── */
.wclr-account-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--wclr-radius-lg);
    margin-bottom: 28px;
    border-left: 4px solid;
    font-size: var(--wclr-font-size);
    line-height: 1.6;
}
.wclr-banner-icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    margin-top: 2px;
}
.wclr-banner--pending  { background: var(--wclr-pending-bg);  border-color: var(--wclr-pending-border);  color: var(--wclr-pending-text); }
.wclr-banner--active   { background: var(--wclr-active-bg);   border-color: var(--wclr-active-border);   color: var(--wclr-active-text); }
.wclr-banner--inactive { background: var(--wclr-inactive-bg); border-color: var(--wclr-inactive-border); color: var(--wclr-inactive-text); }
.wclr-banner--pending  .wclr-banner-icon { background: var(--wclr-pending-border); }
.wclr-banner--active   .wclr-banner-icon { background: var(--wclr-active-border); }
.wclr-banner--inactive .wclr-banner-icon { background: var(--wclr-inactive-border); }

/* ── My Account Registration Table ─────────────────────────────────── */
.wclr-account-details  { max-width: 640px; }
.wclr-section-title    { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--wclr-text); }
.wclr-section-intro    { font-size: 14px; color: var(--wclr-text-muted); margin-bottom: 24px; }

.wclr-details-table               { width: 100%; border-collapse: collapse; font-size: var(--wclr-font-size); }
.wclr-details-table th,
.wclr-details-table td            { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--wclr-border); vertical-align: middle; }
.wclr-details-table th            { width: 38%; font-weight: var(--wclr-label-weight); color: var(--wclr-text-muted); font-size: var(--wclr-label-size); background: var(--wclr-surface); }
.wclr-discount-highlight          { font-weight: 700; color: var(--wclr-active-text); }

/* ── Licensee price on product pages ───────────────────────────────── */
.wclr-licensee-price-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 5px 10px;
    background: var(--wclr-active-bg);
    border: 1px solid var(--wclr-active-border);
    border-radius: var(--wclr-radius);
    font-size: 13px;
    color: var(--wclr-active-text);
}
.wclr-licensee-label { font-weight: var(--wclr-label-weight); }

/* ── Status Widget ──────────────────────────────────────────────────── */
.wclr-status-widget .wclr-widget-message {
    padding: 16px 20px;
    background: var(--wclr-active-bg);
    border: 1px solid var(--wclr-active-border);
    border-radius: var(--wclr-radius-lg);
    color: var(--wclr-active-text);
    font-size: var(--wclr-font-size);
    line-height: 1.6;
}

/* ── Misc ───────────────────────────────────────────────────────────── */
.wclr-reg-fields .required { color: #e53e3e; }
.wclr-reg-fields,
.wclr-account-details,
.wclr-account-banner,
.wclr-status-widget { font-family: inherit; }