/* 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;
    background-size: auto 110%;
}

.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;
}

.dn-tanc-gc__custom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--gc-border);
    border-radius: 999px;
    padding: 0 8px 0 14px;
}

.dn-tanc-gc__custom.is-active {
    border-color: var(--gc-ink);
}

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

.dn-tanc-gc__custom-input {
    border: 0 !important;
    outline: none;
    width: 5.5em;
    padding: 9px 6px !important;
    background: transparent;
    box-shadow: none !important;
}

.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;
    }
}