/* Gift Card buy widget ([tanc_gift_card]) — Figma: live preview card (left) +
   amount/recipient/message form (right). */
.dn-tanc-gc {
    --gc-teal: #3bb3c9;
    --gc-ink: #111;
    --gc-muted: #6b7177;
    --gc-border: #d7dbdf;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
    /* Fill the container the shortcode is placed in (it's a flex item, which
       would otherwise shrink to its content width). The surrounding Content
       Block container controls the overall width — the widget no longer imposes
       its own max-width. */
    width: 100%;
    box-sizing: border-box;
}

/* --- Left column: product cover image with the preview card at its foot --- */
/* The preview card is a fixed ~343px tall and sits at the foot of this column,
   so the column needs real height above it or the photo behind is all but
   hidden — but not so much that the shot is dominated by empty sky.
   The photo is square (2000x2000) while this column is portrait, so `cover`
   would always fit the FULL height of the photo and show every bit of its sky,
   no matter what height we pick. Scaling to 110% of the column height and
   anchoring to the bottom instead trims that sky off the top and leaves the
   two women filling the band above the card. */
.dn-tanc-gc__left {
    position: relative;
    min-height: 760px;
    border-radius: 12px;
    overflow: hidden;
    background: #e6eaed no-repeat center bottom;
    /* cover: the photo must always fill the panel. "auto 110%" only sized the
       height, so on wide screens (panel wider than 1.1x its height) the square
       photo came up short and left grey bands on both sides. cover scales to
       whichever axis needs it; bottom-anchoring keeps the two women in frame
       and crops sky first when the panel is landscape. */
    background-size: cover;
}

.dn-tanc-gc__left--cover .dn-tanc-gc-card,
.dn-tanc-gc__left .dn-tanc-gc-card {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.dn-tanc-gc--error {
    display: block;
    padding: 14px 16px;
    border: 1px solid #dba617;
    background: #fcf9e8;
    border-radius: 6px;
    color: #8a6d3b;
}

.dn-tanc-gc__heading {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--gc-ink);
}

/* --- Preview card --- */
.dn-tanc-gc-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    background: #fff;
}

.dn-tanc-gc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--gc-teal);
    color: #fff;
    font-size: 20px;
}

.dn-tanc-gc-card__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.dn-tanc-gc-card__logo {
    display: block;
    height: 22px;
    width: auto;
}

.dn-tanc-gc-card__amount {
    font-weight: 700;
}

.dn-tanc-gc-card__body {
    padding: 18px 20px 24px;
}

.dn-tanc-gc-card__line {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--gc-ink);
}

.dn-tanc-gc-card__lbl {
    color: var(--gc-teal);
    font-weight: 600;
    margin-right: 6px;
}

/* Message: fixed 155px, native scrollbar hidden — a custom 8×39 pill is drawn
   instead (the native thumb can't be a fixed size). */
.dn-tanc-gc-card__msg-scroll {
    position: relative;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #eee;
}

.dn-tanc-gc-card__msg {
    height: 155px;
    overflow-y: auto;
    padding-right: 16px;
    color: var(--gc-muted);
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    scrollbar-width: none;      /* Firefox — hide native */
    -ms-overflow-style: none;
}

.dn-tanc-gc-card__msg::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.dn-tanc-gc-card__msg:empty::before {
    content: attr(data-placeholder);
    color: #aeb3b8;
}

/* Custom pill scrollbar (8 wide, 39 tall thumb, rounded ends). */
.dn-tanc-gc-card__scrolltrack {
    position: absolute;
    top: 14px;
    right: 0;
    height: 155px;
    width: 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--gc-border);
    box-sizing: border-box;
    display: none;
}

.dn-tanc-gc-card__scrolltrack.is-active {
    display: block;
}

.dn-tanc-gc-card__scrollthumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 39px;
    border-radius: 999px;
    background: var(--gc-teal);
    cursor: grab;
    box-sizing: border-box;
}

.dn-tanc-gc-card__scrollthumb:active {
    cursor: grabbing;
}

/* --- Form --- */
/* Figma: Mona Sans (inherits theme font), Medium 500, 120% line-height, -3%
   letter-spacing. */
.dn-tanc-gc__title {
    color: #02A7C4;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
}

.dn-tanc-gc__intro {
    color: var(--gc-muted);
    margin: 0 0 20px;
    line-height: 1.5;
}

.dn-tanc-gc__label {
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #0F0F0F;
    margin: 0 0 12px;
}

.dn-tanc-gc__amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dn-tanc-gc__pill {
    border: 1px solid var(--gc-border);
    background: #fff;
    color: var(--gc-ink);
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dn-tanc-gc__pill:hover {
    border-color: var(--gc-ink);
}

.dn-tanc-gc__pill.is-active {
    background: var(--gc-ink);
    border-color: var(--gc-ink);
    color: #fff;
}

/* "Own Amount" free-value field, revealed below the amount pills when the
   "Own Amount" pill is chosen. */
.dn-tanc-gc__own {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0 0;
    border: 1px solid var(--gc-border);
    border-radius: 8px;
    padding: 0 14px;
}

/* Class rules set display:flex, which would otherwise beat the `hidden`
   attribute's UA display:none — keep it hidden until the toggle reveals it. */
.dn-tanc-gc__own[hidden] {
    display: none;
}

/* No coloured focus ring — keep the plain border on focus. */
.dn-tanc-gc__own:focus-within {
    border-color: var(--gc-border);
    box-shadow: none;
}

.dn-tanc-gc__own-symbol {
    color: var(--gc-muted);
}

.dn-tanc-gc__own-input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    outline: none !important;
    padding: 12px 6px !important;
    background: transparent;
    box-shadow: none !important;
    font-size: 15px;
}

.dn-tanc-gc__section {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #0F0F0F;
    margin: 24px 0 12px;
}

.dn-tanc-gc__field {
    margin: 0 0 16px;
}

.dn-tanc-gc__step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gc-ink);
    margin: 0 0 10px;
}

.dn-tanc-gc__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gc-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.dn-tanc-gc__input,
.dn-tanc-gc__textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--gc-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    margin: 0 0 10px;
    background: #fff;
    box-sizing: border-box;
}

.dn-tanc-gc__input:focus,
.dn-tanc-gc__textarea:focus {
    border-color: var(--gc-teal);
    outline: none;
}

.dn-tanc-gc__textarea {
    resize: vertical;
    min-height: 110px;
}

.dn-tanc-gc__error {
    color: #b32d2e;
    font-size: 13px;
    margin: 6px 0 0;
}

.dn-tanc-gc__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--gc-border);
    padding-top: 16px;
    margin-top: 20px;
    font-weight: 600;
    color: var(--gc-ink);
}

.dn-tanc-gc__summary-label {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #0F0F0F;
}

.dn-tanc-gc__summary-total {
    font-size: 18px;
}

.dn-tanc-gc__vat {
    font-size: 12px;
    font-weight: 400;
    color: var(--gc-muted);
}

.dn-tanc-gc__cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
}

/* Match the native single product: the Add-to-cart button is the same height as
   the quantity box (stretch), not just its text height. */
.dn-tanc-gc__cart .quantity,
.dn-tanc-gc__cart .single_add_to_cart_button {
    align-self: stretch;
}

/* Native WooCommerce quantity + Add-to-cart button — leave their look to the
   theme (Blocksy); only own the row layout so the button fills the width. */
.dn-tanc-gc__cart .quantity {
    flex: 0 0 auto;
}

.dn-tanc-gc__cart .single_add_to_cart_button {
    flex: 1 1 auto;
}

/* Blocksy paints the native single-product Add-to-cart via the palette, but
   scopes it to .entry-summary — which our Content Block context isn't inside, so
   the button falls back to the generic (teal) theme button. Re-apply the SAME
   theme-palette variables Blocksy uses, so the button matches native product
   pages (black) and still follows the theme if the palette changes. */
.dn-tanc-gc .single_add_to_cart_button {
    --theme-button-background-initial-color: var(--theme-palette-color-4);
    --theme-button-background-hover-color: var(--theme-palette-color-2);
}

@media (max-width: 860px) {
    .dn-tanc-gc {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Stacked, the form is what the shopper has come to fill in — so it leads and
       the live preview of what they typed follows it. */
    .dn-tanc-gc__right {
        order: 1;
    }

    /* Narrower column, same fixed-height card: it needs less room above the card
       than the desktop layout, and a shorter box also means the square photo is
       scaled up less, so the two women stay recognisable rather than cropped in. */
    .dn-tanc-gc__left {
        order: 2;
        min-height: 660px;
    }
}