/* ============================================
   LEGALESS PACKAGES v1.1
   Avada-Child-Theme/assets/legaless-packages/legaless-packages.css
   ============================================ */

:root {
    --lp-teal:        #00b2ae;
    --lp-teal-dark:   #009e9a;
    --lp-teal-light:  #e6f7f7;
    --lp-navy:        #082939;
    --lp-text:        #2c3e50;
    --lp-muted:       #666;
    --lp-bg:          #f4f7f8;
    --lp-white:       #ffffff;
    --lp-border:      #e0e9ec;
    --lp-green:       #27ae60;
    --lp-green-light: #eafaf1;
    --lp-red:         #e74c3c;
    --lp-red-light:   #fdf0ef;
    --lp-shadow:      0 4px 20px rgba(0,0,0,0.08);
    --lp-shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
    --lp-radius:      12px;
    --lp-radius-sm:   6px;
    --lp-ease:        0.2s ease;
    /* Per-card accent colors */
    --svc-accent:  #3498db;
    --svc-light:   #eaf4fc;
    --time-accent: #e67e22;
    --time-light:  #fef6ed;
    --prm-accent:  #00b2ae;
    --prm-light:   #e6f7f7;
}

#legaless-packages-app *,
#legaless-packages-app *::before,
#legaless-packages-app *::after { box-sizing: border-box; }

#legaless-packages-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--lp-text);
    background: var(--lp-bg);
    padding: 60px 20px 80px;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   HERO
   ============================================ */
.lp-hero {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
}
.lp-hero__eyebrow {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--lp-navy);
    line-height: 1.2;
    margin: 0 0 10px;
    letter-spacing: normal;
    text-transform: none;
    border: none;
    padding: 0;
    border-radius: 0;
}
.lp-hero__title {
    font-size: 18px;
    font-weight: 400;
    color: var(--lp-muted);
    line-height: 1.4;
    margin: 0 0 18px;
}
.lp-hero__text {
    font-size: 16px;
    color: var(--lp-muted);
    line-height: 1.75;
    margin: 0 0 28px;
}
.lp-hero__benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-hero__benefits li {
    font-size: 13px;
    font-weight: 600;
    color: var(--lp-teal-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lp-hero__benefits li::before { content: '✓'; font-weight: 900; }

/* ============================================
   GRID (desktop: 3 col)
   ============================================ */
.lp-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

/* ============================================
   CARD — base
   ============================================ */
.lp-card {
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow);
    border: 2px solid transparent;
    border-top-width: 4px;
    position: relative;
    transition: box-shadow var(--lp-ease), border-color var(--lp-ease), transform var(--lp-ease);
}

/* Per-card accent top-border + header tint */
.lp-card--servizi { border-top-color: var(--svc-accent); }
.lp-card--tempo   { border-top-color: var(--time-accent); }
.lp-card--premium { border-top-color: var(--prm-accent); }

.lp-card--servizi .lp-card__header  { background: linear-gradient(135deg, var(--svc-light) 0%, #fff 100%); }
.lp-card--tempo   .lp-card__header  { background: linear-gradient(135deg, var(--time-light) 0%, #fff 100%); }
.lp-card--premium .lp-card__header  { background: linear-gradient(135deg, var(--prm-light) 0%, #fff 100%); }

/* Hover — border highlights (like hero-new cards) */
.lp-card--servizi:hover  { border-color: var(--svc-accent);  box-shadow: 0 0 0 3px rgba(52,152,219,.13), var(--lp-shadow-lg); transform: translateY(-2px); }
.lp-card--tempo:hover    { border-color: var(--time-accent); box-shadow: 0 0 0 3px rgba(230,126,34,.13), var(--lp-shadow-lg); transform: translateY(-2px); }
.lp-card--premium:hover  { border-color: var(--prm-accent);  box-shadow: 0 0 0 3px rgba(0,178,174,.13),  var(--lp-shadow-lg); transform: translateY(-2px); }

.lp-card__header {
    padding: 26px 26px 18px;
    border-bottom: 1px solid var(--lp-border);
    text-align: center;
    border-radius: calc(var(--lp-radius) - 2px) calc(var(--lp-radius) - 2px) 0 0;
}
.lp-card__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 3px 11px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.lp-card--servizi .lp-card__badge  { background: rgba(52,152,219,.12);  color: #2176ae; }
.lp-card--tempo   .lp-card__badge  { background: rgba(230,126,34,.12);  color: #c0641a; }
.lp-card--premium .lp-card__badge  { background: var(--lp-teal-light);  color: var(--lp-teal-dark); }

.lp-card__title {
    font-size: 21px;
    font-weight: 700;
    color: var(--lp-navy);
    margin: 0 0 8px;
    text-align: center;
}
.lp-card__desc {
    font-size: 13px;
    color: var(--lp-muted);
    line-height: 1.6;
    margin: 0;
    text-align: center;
}
.lp-card__body { padding: 22px 26px 26px; }

/* "Il più scelto" badge */
.lp-popular-badge {
    position: absolute;
    top: -1px;
    right: 18px;
    background: var(--time-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 10px 4px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 8px rgba(230,126,34,.3);
}

/* ============================================
   SECTION LABEL
   ============================================ */
.lp-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--lp-muted);
    margin: 0 0 10px;
}

/* ============================================
   AREA CHECKBOXES
   ============================================ */
.lp-areas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.lp-area-item { display: flex; flex-direction: column; }

.lp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--lp-radius-sm);
    border: 1.5px solid var(--lp-border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--lp-ease), border-color var(--lp-ease);
    user-select: none;
}
.lp-checkbox-label:hover { background: var(--lp-teal-light); border-color: var(--lp-teal); }
.lp-checkbox-label--checked { background: var(--lp-teal-light); border-color: var(--lp-teal); color: var(--lp-teal-dark); }
.lp-checkbox-label input[type="checkbox"] {
    width: 17px; height: 17px;
    accent-color: var(--lp-teal);
    cursor: pointer; flex-shrink: 0;
}

/* Quantity row — FIX: flex-wrap so badge never clips */
.lp-qty-row {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 12px 6px 38px;
}
.lp-qty-row--show { display: flex; animation: lp-fadein 0.15s ease; }
.lp-qty-row label { font-size: 11px; color: var(--lp-muted); white-space: nowrap; flex: 0 0 auto; }
.lp-qty-row select {
    flex: 1 1 100px;
    min-width: 0;
    padding: 5px 8px;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    font-size: 12px;
    background: var(--lp-white);
    cursor: pointer;
}
.lp-qty-row select:focus { outline: 2px solid var(--lp-teal); outline-offset: 1px; }
.lp-disc-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--lp-green);
    background: var(--lp-green-light);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ============================================
   FIELDS
   ============================================ */
.lp-field { margin-bottom: 14px; }
.lp-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--lp-muted);
    margin-bottom: 6px;
}
.lp-field select,
.lp-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: var(--lp-text);
    background: var(--lp-white);
    transition: border-color var(--lp-ease);
}
.lp-field select:focus,
.lp-field textarea:focus { outline: 2px solid var(--lp-teal); outline-offset: 1px; border-color: var(--lp-teal); }
.lp-field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.lp-field-note {
    font-size: 11px;
    color: var(--lp-muted);
    margin: 5px 0 0;
    font-style: italic;
}

/* ============================================
   PRICE BOX (Per Tempo)
   ============================================ */
.lp-price-box {
    display: none;
    background: var(--time-light);
    border-radius: var(--lp-radius-sm);
    padding: 14px 16px;
    margin: 12px 0;
}
.lp-price-box--show { display: block; animation: lp-fadein 0.2s ease; }
.lp-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--lp-muted);
    margin-bottom: 3px;
}
.lp-price-row--total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(230,126,34,0.2);
}
.lp-price-row__lbl { font-weight: 500; }
.lp-price-row__val { font-weight: 700; color: var(--lp-text); }
.lp-price-total-lbl { font-size: 14px; font-weight: 700; color: var(--lp-navy); }
.lp-price-total-val { font-size: 20px; font-weight: 800; color: var(--time-accent); }
.lp-price-savings { text-align: right; font-size: 11px; color: var(--lp-green); font-weight: 600; margin-top: 3px; }
.lp-price-note {
    font-size: 11px;
    color: var(--lp-muted);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(230,126,34,0.15);
    line-height: 1.5;
}

/* ============================================
   INLINE ERRORS
   ============================================ */
.lp-err {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--lp-red);
    background: var(--lp-red-light);
    padding: 7px 11px;
    border-radius: var(--lp-radius-sm);
    margin-top: 5px;
}
.lp-err--show { display: flex; }
.lp-err::before {
    content: '!';
    width: 15px; height: 15px;
    background: var(--lp-red);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}

/* ============================================
   CTA BUTTON
   ============================================ */
.lp-cta {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: var(--lp-teal);
    color: #fff;
    border: none;
    border-radius: var(--lp-radius-sm);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.3px;
    text-align: center;
    margin-top: 18px;
    transition: background var(--lp-ease), transform var(--lp-ease);
}
.lp-cta:hover  { background: var(--lp-teal-dark); transform: translateY(-1px); }
.lp-cta:focus  { outline: 3px solid var(--lp-teal); outline-offset: 2px; }
.lp-cta:active { transform: translateY(0); }
.lp-cta:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Per Tempo CTA accent */
.lp-card--tempo .lp-cta { background: var(--time-accent); }
.lp-card--tempo .lp-cta:hover { background: #c86b10; }

.lp-stripe-note {
    font-size: 11px;
    color: var(--lp-muted);
    text-align: center;
    margin-top: 10px;
    line-height: 1.55;
}
.lp-stripe-note a { color: var(--lp-teal); text-decoration: underline; }

/* ============================================
   AUTH PANEL
   ============================================ */
.lp-auth-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: none;
}
.lp-auth-wrap--show { display: block; animation: lp-slidedown 0.28s ease; }
@keyframes lp-slidedown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lp-auth-box {
    background: var(--lp-white);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-lg);
    border: 2px solid var(--lp-teal);
    padding: 34px 38px;
    margin-top: 20px;
    position: relative;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.lp-auth-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    background: none; border: none;
    font-size: 19px; color: var(--lp-muted);
    cursor: pointer; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--lp-ease);
}
.lp-auth-close:hover { background: var(--lp-bg); }
.lp-auth-title { font-size: 19px; font-weight: 700; color: var(--lp-navy); margin: 0 0 4px; }
.lp-auth-sub { font-size: 13px; color: var(--lp-muted); margin: 0 0 22px; }

.lp-auth-tabs { display: flex; border-bottom: 2px solid var(--lp-border); margin-bottom: 24px; }
.lp-auth-tab {
    padding: 9px 22px;
    font-size: 13px; font-weight: 600;
    color: var(--lp-muted);
    border: none; background: none; cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--lp-ease), border-color var(--lp-ease);
}
.lp-auth-tab:hover { color: var(--lp-teal); }
.lp-auth-tab--on { color: var(--lp-teal); border-bottom-color: var(--lp-teal); }

.lp-auth-pane { display: none; }
.lp-auth-pane--on { display: block; }

.lp-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.lp-auth-grid--full { grid-template-columns: 1fr; }
.lp-auth-field { display: flex; flex-direction: column; gap: 5px; }
.lp-auth-field label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--lp-muted);
}
.lp-auth-field input {
    padding: 9px 12px;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    font-size: 13px; font-family: inherit;
    width: 100%;
    transition: border-color var(--lp-ease);
}
.lp-auth-field input:focus { outline: 2px solid var(--lp-teal); outline-offset: 1px; border-color: var(--lp-teal); }

.lp-accept { display: flex; align-items: flex-start; gap: 9px; margin: 10px 0 4px; }
.lp-accept input[type="checkbox"] {
    width: 17px; height: 17px;
    accent-color: var(--lp-teal);
    cursor: pointer; flex-shrink: 0; margin-top: 2px;
}
.lp-accept label { font-size: 12px; color: var(--lp-muted); line-height: 1.5; cursor: pointer; }
.lp-accept label a { color: var(--lp-teal); text-decoration: underline; }

.lp-auth-msg { display: none; padding: 10px 14px; border-radius: var(--lp-radius-sm); font-size: 12px; margin-bottom: 14px; }
.lp-auth-msg--show { display: block; }
.lp-auth-msg--err { background: var(--lp-red-light); color: var(--lp-red); }
.lp-auth-msg--ok  { background: var(--lp-green-light); color: var(--lp-green); }

.lp-auth-submit {
    display: block; width: 100%; padding: 13px;
    background: var(--lp-navy); color: #fff; border: none;
    border-radius: var(--lp-radius-sm);
    font-size: 14px; font-weight: 700; cursor: pointer;
    margin-top: 18px; letter-spacing: 0.3px;
    transition: background var(--lp-ease), transform var(--lp-ease);
}
.lp-auth-submit:hover    { background: var(--lp-teal); transform: translateY(-1px); }
.lp-auth-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.lp-spin { display: none; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--lp-muted); padding: 8px 0; }
.lp-spin--show { display: flex; }
.lp-spin__icon {
    width: 16px; height: 16px;
    border: 2px solid var(--lp-border);
    border-top-color: var(--lp-teal);
    border-radius: 50%;
    animation: lp-spin 0.65s linear infinite;
    flex-shrink: 0;
}
@keyframes lp-spin    { to { transform: rotate(360deg); } }
@keyframes lp-fadein  { from { opacity: 0; } to { opacity: 1; } }

/* ============================================
   MOBILE — 3 compact headers + flex-wrap expand
   ============================================ */
@media (max-width: 900px) {
    .lp-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
    }

    /* Compact (closed) state — equal thirds */
    .lp-card {
        flex: 1 0 calc(33.33% - 8px);
        min-width: 0;
        cursor: pointer;
        transition: box-shadow var(--lp-ease), border-color var(--lp-ease), flex var(--lp-ease);
    }
    .lp-card__body { display: none; }
    .lp-card__desc { display: none; }
    .lp-card__header { padding: 14px 10px; }
    .lp-card__title { font-size: 12px; font-weight: 700; margin: 0; }
    .lp-card__badge { font-size: 9px; padding: 2px 7px; margin-bottom: 5px; }
    .lp-popular-badge { font-size: 8px; padding: 3px 7px 2px; right: 6px; }

    /* Open state — card drops to second row, full width */
    .lp-card.lp-card--open {
        flex: 1 0 100%;
        order: 10;
        cursor: default;
    }
    .lp-card.lp-card--open .lp-card__body  { display: block; }
    .lp-card.lp-card--open .lp-card__desc  { display: block; }
    .lp-card.lp-card--open .lp-card__header { padding: 20px 20px 14px; }
    .lp-card.lp-card--open .lp-card__title  { font-size: 19px; }
    .lp-card.lp-card--open .lp-card__badge  { font-size: 11px; padding: 3px 11px; }
    .lp-card.lp-card--open .lp-popular-badge { font-size: 10px; padding: 4px 9px 3px; right: 16px; }
    .lp-card.lp-card--open .lp-card__body   { padding: 18px 20px 22px; }

    /* "Open" indicator on compact cards */
    .lp-card:not(.lp-card--open)::after {
        content: '▾';
        display: block;
        text-align: center;
        font-size: 11px;
        color: var(--lp-muted);
        margin-top: 4px;
    }

    .lp-auth-box { padding: 22px 16px; }
    .lp-auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    #legaless-packages-app { padding: 32px 12px 52px; }
    .lp-hero { margin-bottom: 32px; }
    .lp-cta, .lp-auth-submit { font-size: 15px; padding: 15px; }
}