/* ============================================================
   PLAN / PRICE CARDS — plan.css
   ============================================================
   The one stylesheet behind every "plan" panel on the quote page:

     accounting/quote_page/services/others/plans.html
     accounting/quote_page/services/attestation/plan.html
     accounting/quote_page/services/interpretation/plan.html

   Each of those partials links this file itself. That is on
   purpose: the panels are injected with
   `$("#...PlansPanel").html(response.plans)`, so a partial can be
   the first thing on the page that needs these rules, and a
   <link> travelling with the markup is the pattern the sibling
   form partials already use.

   Scoping
   -------
   Everything is scoped to `.card-price.plans-cards`, and the
   selectors deliberately mirror the legacy depth in
   assets/sass/style.css (`.card-price .card--inner-box
   .inner-wrapper` …) so they win on specificity regardless of
   load order. A plan panel without `.plans-cards` on its root
   keeps the old look untouched.

   `!important` appears only on font-size / font-weight / padding
   of anchors: the interpretation plan panel is injected *inside*
   #interpretationServiceFromPanel, which carries an
   id-scoped `a { font-size: 12px; font-weight: 600 }` rule, and
   an id beats any number of classes.

   Every value comes from variables.css, with a literal fallback
   because accounting/quote.html (the legacy page) can't link
   variables.css — its global reset would flatten that page.

   Load order:  variables.css  →  bootstrap  →  this file
   ============================================================ */

.card-price.plans-cards {
    --plan-hairline: var(--color-divider, #ededed);
    --plan-muted: rgba(41, 23, 4, 0.34);
    font-family: var(--font-body, "IBM Plex Sans", sans-serif);
    color: var(--color-text-primary, #291704);
    background: #F1F0E880;
    border-radius: var(--radius-lg, 16px);
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ── card grid ─────────────────────────────────────────────────
   One, three or five cards all centre themselves; each card is
   its own column so the CTAs line up at the bottom.            */
.card-price.plans-cards .card--inner-box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
}

.card-price.plans-cards .card--inner-box .inner-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 1 310px;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 38px 34px 30px;
    text-align: left;
    background: var(--color-surface-white, #fff);
    border: 1px solid var(--plan-hairline);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 4px 18px rgba(41, 23, 4, 0.04);
}

/* ── header: name + badge + sub-services ───────────────────────
   The three children are ordered in CSS, so a template is free
   to emit them in whatever order its markup already has.       */
.card-price.plans-cards .card--inner-box .top-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 0;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--plan-hairline);
}
.card-price.plans-cards .card--inner-box .top-box h1 {
    order: 1;
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-primary, #291704);
}
/* The badge doubles as its own floating-tooltip trigger: the delegated
   init in others/main.html keys off data-bs-custom-class, not a class
   here, so the markup needs no .floating-info — and must not carry it.
   That class sizes a trigger as a bare 16px icon box, which collapses
   this pill; the affordances it would have brought are below instead. */
.card-price.plans-cards .card--inner-box .top-box .best-seller {
    order: 2;
    position: static;
    top: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 11px;
    background: var(--color-brand-gold, #958049);
    border-radius: var(--radius-full, 999px);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
}
.card-price.plans-cards .card--inner-box .top-box .best-seller:focus-visible {
    outline: 2px solid var(--color-text-primary, #291704);
    outline-offset: 2px;
}
/* hover/focus stays on the pill, so the tooltip can't flicker when the
   pointer crosses from the star onto the padding around it */
.card-price.plans-cards .card--inner-box .top-box .best-seller svg {
    height: 18px;
    width: 18px;
    pointer-events: none;
}
/* the gold line under the plan name: sub-service list (others) or
   the service name + its icon (attestation / interpretation) */
.card-price.plans-cards .card--inner-box .top-box .plan-subservices {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-brand-gold, #958049);
    opacity: 1;
}
.card-price.plans-cards .card--inner-box .top-box .plan-subservices img {
    flex: 0 0 auto;
}
.card-price.plans-cards .card--inner-box .top-box .plan-subservices:empty {
    display: none;
}

/* ── delivery / duration ───────────────────────────────────── */
.card-price.plans-cards .card--inner-box .delivery-box { margin: 0; }
.card-price.plans-cards .card--inner-box .delivery-box p.small {
    margin: 0 0 5px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--plan-muted);
    opacity: 1;
}
/* the value line: a date + time, or a duration in hours */
.card-price.plans-cards .card--inner-box .delivery-box p.delivery-date {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary, #291704);
}
.card-price.plans-cards .card--inner-box .delivery-box .delivery-date__dot {
    padding: 0 2px;
    font-weight: 500;
    color: var(--plan-muted);
}
.card-price.plans-cards .card--inner-box .delivery-box .delivery-date__tz {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-secondary, #71717a);
}
.card-price.plans-cards .card--inner-box .delivery-box p.need-faster {
    margin: 18px 0 0;
    font-weight: 400;
}
.card-price.plans-cards .card--inner-box .delivery-box p.need-faster a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: var(--color-text-primary, #291704);
    opacity: 1;
    text-decoration: none;
}
.card-price.plans-cards .card--inner-box .delivery-box p.need-faster a svg {
    width: 20px;
    height: 20px;
}
.card-price.plans-cards .card--inner-box .delivery-box p.need-faster a:hover {
    text-decoration: underline;
}

/* ── price ─────────────────────────────────────────────────────
   .strikethrough keeps no `display` of its own: the discount
   modals reveal it with jQuery .show(), which only clears the
   inline display:none and lets the span fall back to inline.   */
.card-price.plans-cards .card--inner-box .price-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 20px 0 0;
}
.card-price.plans-cards .card--inner-box .price-box .strikethrough {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 400;
    color: var(--plan-muted);
    text-decoration: line-through;
}
.card-price.plans-cards .card--inner-box .price-box .price-tag {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text-primary, #291704);
}
/* the per-unit rate: per page / per word / per hour */
.card-price.plans-cards .card--inner-box .price-box .price-rate {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--color-brand-gold, #958049);
}
.card-price.plans-cards .card--inner-box .price-box .price-rate__approx {
    margin-right: 3px;
}
/* extra charges (DTP / courier / notarization / travel / urgency …) */
.card-price.plans-cards .card--inner-box .price-box .price-extra {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text-muted, rgba(41, 23, 4, 0.8));
}
.card-price.plans-cards .card--inner-box .price-box p:empty {
    display: none;
    margin: 0;
}

/* ── CTA ───────────────────────────────────────────────────── */
.card-price.plans-cards .card--inner-box .order-box {
    margin-top: auto;
    padding-top: 30px;
}
.card-price.plans-cards .card--inner-box .order-box .order-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    background: var(--color-brand-gold, #958049);
    border: 0;
    border-radius: var(--radius-full, 999px);
    box-shadow: none;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
    transition: background var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease);
}
.card-price.plans-cards .card--inner-box .order-box .order-now:hover {
    background: var(--color-brand-gold-hover, #a8904a);
    color: #fff;
}
.card-price.plans-cards .card--inner-box .inner-wrapper .order-box a.order-now.disabled {
    background: var(--color-surface-subtle, #f1f0e8);
    color: rgba(41, 23, 4, 0.3);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ── more details ──────────────────────────────────────────── */
.card-price.plans-cards .card--inner-box .order-box p.small {
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    /* white-space first: `text-wrap: nowrap` is the newer
       text-wrap-mode shorthand (Chrome/Edge 130+, Safari 17.5+,
       FF 124+) and is dropped whole by anything older. */
    white-space: nowrap;
    text-wrap: nowrap;
    text-align: center;
    color: var(--color-text-primary, #291704);
}
.card-price.plans-cards .card--inner-box .order-box p.small .text-decoration-underline {
    text-decoration: none !important;
    cursor: pointer;
}
.card-price.plans-cards .card--inner-box .order-box p.small .text-decoration-underline:hover {
    text-decoration: underline !important;
}
/* bootstrap_tooltip.css sizes .floating-info as a 16px icon —
   here the trigger is a text label, so undo the box. */
.card-price.plans-cards .card--inner-box .order-box p.small .floating-info {
    display: inline;
    width: auto;
    height: auto;
    vertical-align: baseline;
}

/* the legacy CSS-only hover bubble (attestation / interpretation).
   Repainted to match .floating-tooltip: pale surface, no arrow.
   `display` is set on both states here so the panel no longer
   depends on the host page declaring .show-span-hover.          */
.card-price.plans-cards .card--inner-box .order-box p.small .show-span-hover {
    display: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: 240px;
    padding: 8px 12px;
    background: var(--color-surface-subtle, #f1f0e8);
    border: 0;
    border-radius: 18px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(12, 37, 63, 0.15));
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    text-wrap: wrap;
    white-space: normal;
    color: var(--color-text-primary, #291704);
}
.card-price.plans-cards .card--inner-box .order-box p.small .show-span-hover::after {
    display: none;
}
.card-price.plans-cards .card--inner-box .order-box p.small.hover-p:hover .show-span-hover {
    display: block;
}

/* ── footer actions (send / download / discount) ───────────── */
.card-price.plans-cards .quote_new_btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}
.card-price.plans-cards .quote_new_btn .btn-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 10px 22px !important;
    background: var(--color-surface-subtle, #f1f0e8);
    border: 0;
    border-radius: var(--radius-full, 999px);
    box-shadow: none;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: var(--color-text-primary, #291704);
    text-decoration: none;
    transition: background var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease);
}
.card-price.plans-cards .quote_new_btn .btn-continue:hover {
    background: var(--color-surface-gold-pale, #f5f0e8);
    border: 0;
    color: var(--color-text-primary, #291704);
}
.card-price.plans-cards .quote_new_btn .btn-continue .icon_bootstrap {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    line-height: 1;
}
.card-price.plans-cards .quote_new_btn .btn-continue.blue-background {
    background: var(--color-brand-navy, #0b263e);
    color: #fff;
}
.card-price.plans-cards .quote_new_btn .btn-continue.blue-background:hover {
    background: var(--color-brand-navy-hover, #123a5c);
    color: #fff;
}

/* The prominent variant for "Share quote". Gold rather than a second
   navy: navy is taken by "Send quote to customer", which staff see in
   the same row, and two filled buttons of one colour would read as a
   pair of equals. Gold is the accent the rest of the quotation flow
   already uses for its primary control (delivery-date-modal.css).

   `color` is restated on hover for the same reason it is on
   .blue-background: agile.css restyles buttons globally above 1200px. */
.card-price.plans-cards .quote_new_btn .btn-continue.gold-background {
    background: var(--color-brand-gold, #958049);
    color: #fff;
}
.card-price.plans-cards .quote_new_btn .btn-continue.gold-background:hover {
    background: var(--color-brand-gold-hover, #A8904A);
    color: #fff;
}

/* ── one column as soon as two cards no longer fit side by side ── */
@media (max-width: 689.98px) {
    .card-price.plans-cards .card--inner-box { gap: 16px; }
    .card-price.plans-cards .card--inner-box .inner-wrapper {
        flex: 1 1 100%;
        max-width: 420px;
    }
}

/* ── phones ────────────────────────────────────────────────── */
@media (max-width: 479.98px) {
    .card-price.plans-cards .card--inner-box .inner-wrapper { padding: 28px 22px 26px; }
    .card-price.plans-cards .card--inner-box .top-box h1 { font-size: 24px; }
    .card-price.plans-cards .card--inner-box .price-box .price-tag { font-size: 27px; }
    .card-price.plans-cards .card--inner-box .order-box p.small .show-span-hover { max-width: 200px; }
    .card-price.plans-cards .quote_new_btn .btn-continue { flex: 1 1 100%; }
}