@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* =========================================================================
   GRILANDIA — Gift Voucher Wizard Skin   (gift-voucher-mrk)
   -------------------------------------------------------------------------
   HOW TO LOAD (pick one):
   A) Save as assets/css/grilandia-skin.css and enqueue right AFTER the
      plugin style, e.g. in your plugin or theme functions.php:

        add_action('wp_enqueue_scripts', function () {
          wp_enqueue_style(
            'grilandia-skin',
            WPGIFT__PLUGIN_URL . '/assets/css/grilandia-skin.css',
            array('wpgv-voucher-style'),   // load after the base stylesheet
            '1.0.0'
          );
        }, 20);

   B) Or append the rules below (NOT the @import line — move fonts to a
      <link> in the header) to the end of assets/css/voucher-style.css.

   NOTE: Do NOT paste into Settings ▸ Custom CSS — that field is run through
   esc_html(), which turns the ">" child-combinators into &gt; and breaks
   the selectors.

   Some rules are prefixed with `html body` on purpose: the plugin prints an
   inline <style> with !important colour rules, and inline wins on source
   order at equal specificity. The extra elements raise specificity so the
   skin reliably wins without you having to touch Settings.
   ========================================================================= */

:root{
  --g-green:#1B2D1F;
  --g-green-deep:#16301f;
  --g-green-soft:#244a32;
  --g-gold:#B99D75;
  --g-gold-bright:#cba76a;
  --g-card1:#1f3a2b;
  --g-card2:#16271e;
  --g-card-panel:#142019;
  --g-cream:#f2efe7;
  --g-panel:#eceae2;
  --g-ink: #1B2D1F;
  --g-ink-h: #1B2D1F;
  --g-inksoft:#666666;
  --g-label:#54534a;
  --g-line:#C3C6D4;
  --g-field:#cfccc1;
  --g-display:"EB Garamond", Sans-serif;
  --g-ui:"Caudex", Sans-serif;
  --g-radius:4px;
}

/* ---- base frame -------------------------------------------------------- */
#voucher-multistep-form.wizard{
  font-family:var(--g-ui);
  color:var(--g-ink);
/*   max-width:1080px; */
  margin:0 auto;
  border:0;
}
#voucher-multistep-form.wizard *{box-sizing:border-box}

/* =========================================================================
   1. STEP INDICATOR  (bronze circles + ticks + rails)
   The jQuery-Steps nav is .steps>ul>li>a ; each <a> holds span.number + label.
   We hide the default number, draw our own circle with a CSS counter, and
   swap in a tick on done/current steps.
   ========================================================================= */
#voucher-multistep-form.wizard>.steps{
  background:#F2F2F2;
/*   border:1px solid rgba(0,0,0,.05); */
/*   border-radius:6px; */
  padding:16px 24px;
/*   margin-bottom:34px; */
/*   box-shadow:0 1px 2px rgba(30,40,30,.05),0 8px 30px rgba(30,40,30,.06); */
}
#voucher-multistep-form.wizard>.steps>ul{
  display:flex;align-items:center;counter-reset:gstep;margin:0;padding:0;
}
#voucher-multistep-form.wizard>.steps>ul>li{
  float:none;width:auto;display:flex;align-items:center;margin:0;
}
#voucher-multistep-form.wizard>.steps>ul>li:not(:last-child){flex:1}
/* rail between steps */
#voucher-multistep-form.wizard>.steps>ul>li:not(:last-child)::after{
  content:"";flex:1;height:2px;background:var(--g-line);margin:0 14px;
}
/* kill default pill look */
#voucher-multistep-form.wizard>.steps a,
#voucher-multistep-form.wizard>.steps a:hover,
#voucher-multistep-form.wizard>.steps a:active{
  background:transparent!important;color:var(--g-inksoft)!important;
  margin:0;padding:0;border-radius:0;display:flex;align-items:center;gap:12px;
  font-family:var(--g-ui);font-size:24px;letter-spacing:.03em;white-space:nowrap;font-weight:700;
}
#voucher-multistep-form.wizard>.steps a .number{display:none}     /* hide "1." */
/* our circle */
#voucher-multistep-form.wizard>.steps a::before{
  counter-increment:gstep;content:counter(gstep);
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:500;
  border:1.5px solid var(--g-line);color:var(--g-inksoft);background:transparent;
  transition:.3s;
}
/* reached = done OR current → bronze + tick */
html body #voucher-multistep-form.wizard>.steps .done a::before,
html body #voucher-multistep-form.wizard>.steps .current a::before{
  background:var(--g-gold);border-color:var(--g-gold);color:#fff;
  content:"\2713";font-size:14px;        /* check mark */
}
#voucher-multistep-form.wizard>.steps .current a,
#voucher-multistep-form.wizard>.steps .done a{color:var(--g-ink)!important}
#voucher-multistep-form.wizard>.steps .current a::before{
  box-shadow:0 0 0 4px rgba(184,146,74,.18);
}
/* disabled/upcoming keep the outline+number (default ::before) */
#voucher-multistep-form.wizard>.steps .disabled a{cursor:default}

/* =========================================================================
   2. STEP PANELS + HEADINGS
   jQuery-Steps hides .content>.title; we reveal the current one as the
   serif heading. (Edit the <h3> text in front.php for nicer copy, e.g.
   "Choose Your Design and Amount".)
   ========================================================================= */
#voucher-multistep-form.wizard>.content{
  overflow:visible;min-height:0;margin:0;background:transparent;border:0;
}
#voucher-multistep-form.wizard>.content>.body{
  width:100%;float:none;padding:40px 0;
	position:relative;
/*   background:var(--g-panel);border:1px solid rgba(0,0,0,.05); */
/*   border-radius:6px;box-shadow:0 1px 2px rgba(30,40,30,.05),0 8px 30px rgba(30,40,30,.06); */
}
/* keep jQuery-Steps' own title hidden — we inject our own heading in front.php */
#voucher-multistep-form.wizard>.content>.title{display:none}
#voucher-multistep-form .gv-step-head{margin:0 0 24px}
#voucher-multistep-form .gv-step-h{
  font-family:var(--g-display);font-weight:500;font-size:32px;line-height:1.1;
  color:var(--g-ink-h);margin:0 0 6px;letter-spacing:.005em;
}
#voucher-multistep-form .gv-step-sub{
  margin:0;color:var(--g-inksoft);font-size:16px;font-weight:300;
}

/* =========================================================================
   3. TWO-COLUMN LAYOUT  (form left, live preview right)
   Step 1 voucher-row = template grid (:has(.sin-template))
   Steps 2/3/4 voucher-row = form + preview (:has(.secondLeft))
   ========================================================================= */
#voucher-multistep-form .voucher-row{display:block}
#voucher-multistep-form .voucher-row:has(.secondLeft){
  display:grid;grid-template-columns:1fr 404px;gap:30px;
}
#voucher-multistep-form .voucher-row .secondLeft{width:auto;float:none;margin:0}
.voucherform.secondLeft {
    background-color: #f2f2f2;
    margin: 0 !important;
	padding: 24px;
	border: 1px solid #D9D9D9;
}
/* =========================================================================
   4. STEP 1 — TEMPLATE GRID
   ========================================================================= */
#voucher-multistep-form .voucher-row:has(.sin-template){
  display:grid;
	gap:36px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	    padding: 0 6px;
}
#voucher-multistep-form [class*="vouchercol"]{
	width: 100%;
}
#voucher-multistep-form .sin-template{
  display:flex;flex-direction:column;align-items:center;gap:0;border:0;padding:0;
}
#voucher-multistep-form .sin-template label{
  display:block;width:100%;margin:0;padding:0;border:0!important;cursor:pointer;
  border-radius:8px;overflow:hidden;outline:2px solid transparent;outline-offset:3px;
  transition:transform .2s,box-shadow .2s,outline-color .2s;background:transparent;
}
#voucher-multistep-form .sin-template label:hover{transform:translateY(-3px)}
#voucher-multistep-form .sin-template label img{
  width:100%;height:auto;display:block;border-radius:0;
}
#voucher-multistep-form .sin-template label span{
  display:none;   /* amount lives in the card art; hide the text title */
}
html body #voucher-multistep-form .sin-template label.selectImage{
  outline-color:var(--g-gold);box-shadow:0 10px 26px rgba(30,40,30,.18);border:0!important;
}
/* radio under the card */
#voucher-multistep-form .sin-template input[type="radio"]{
  position:static;opacity:1;width:18px;height:18px;margin:0;appearance:none;
  border:1.5px solid var(--g-field);border-radius:50%;background:#fff;
  display:grid;place-items:center;cursor:pointer;
}
html body #voucher-multistep-form .sin-template input[type="radio"]:checked{
  border-color:var(--g-gold);
}
#voucher-multistep-form .sin-template input[type="radio"]:checked::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--g-gold)!important;
}

/* =========================================================================
   5. FORM FIELDS  (shared across personalise + payment)
   ========================================================================= */
#voucher-multistep-form .form-group,
#voucher-multistep-form .voucherValueForm,
#voucher-multistep-form .flex-field{margin-bottom:18px}
#voucher-multistep-form .content .form-group label,
#voucher-multistep-form .flex-field>label{
  display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--g-label);margin-bottom:7px;font-weight:500;
}
#voucher-multistep-form .content .form-group label sup,
#voucher-multistep-form .content .body label sup{color:var(--g-gold)}
html body #voucher-multistep-form .content .form-group input[type="text"],
html body #voucher-multistep-form .content .form-group input[type="email"],
html body #voucher-multistep-form .content .form-group input[type="tel"],
html body #voucher-multistep-form .content .form-group input[type="number"],
html body #voucher-multistep-form .content .form-group select,
html body #voucher-multistep-form .content .form-group textarea{
  width:100%;background:#fff;
	border:1px solid #C3C6D4 !important;
  padding:11px 13px;font-family:var(--g-ui);
  font-size:14px;
	color:var(--g-ink);
	transition:border-color .2s,
		box-shadow .2s;
}
#voucher-multistep-form .content .form-group textarea{min-height:96px;resize:vertical}
html body #voucher-multistep-form .content .form-group input:focus,
html body #voucher-multistep-form .content .form-group select:focus,
html body #voucher-multistep-form .content .form-group textarea:focus{
  outline:none;border-color:var(--g-green-soft)!important;
  box-shadow:0 0 0 3px rgba(36,74,50,.12);
}
#voucher-multistep-form .maxchar{font-size:11.5px;color:var(--g-inksoft);margin-top:6px}
#voucher-multistep-form.wizard>.content>.body label.error{
  color:#b3452f;font-size:11.5px;margin-top:5px;font-weight:400;
}

/* Buying-for toggle (someone_else / yourself) */
#voucher-multistep-form .buying-for>label{margin-bottom:9px}
#voucher-multistep-form .buying-options{
  	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0;
/* 	border:1px solid var(--g-field); */
  	overflow:hidden;margin-bottom:6px;
}
#voucher-multistep-form .buying-options div{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;background:#1B2D1F1A;color:var(--g-ink);cursor:pointer;
  font-size:16px;font-weight:500;letter-spacing:.02em;transition:.2s;border:0;
}
#voucher-multistep-form .buying-options div+div{border-left:1px solid var(--g-field)}
#voucher-multistep-form .buying-options div img{width:16px;height:16px;opacity:.7}

html body #voucher-multistep-form .buying-options div.selected {
    background-color: var(--g-green) !important;
    color: #fff;
    width: 100%;
    border-bottom: 4px solid var(--g-gold) !important;
}
html body #voucher-multistep-form .buying-options div.selected img{filter:brightness(0) invert(1);opacity:.9}

/* quotes */
#voucher-multistep-form .voucher-quotes{color:var(--g-inksoft)}
#voucher-multistep-form .voucher-quotes ul li{
  border-left:3px solid var(--g-gold)!important;border-radius:3px;
}

/* =========================================================================
   6. LIVE PREVIEW CARD  (.secondRightDiv / .voucherstyleN)
   ========================================================================= */
#voucher-multistep-form .secondRightDiv.sideview{
  width:auto;float:none;margin:0;padding:0;
}
/* "Live Preview" tag above the card */
#voucher-multistep-form .priview::before{
  content:"\25CF";
	color:#22C55E;
  font-family:var(--g-display);letter-spacing:.16em;font-size:30px;
  display:block;text-align:center; font-weight:400;
}
span.priview {
    display: flex;
    align-items: baseline;
    justify-content: center;
	font-size:24px;
	font-weight:400;
	line-height:1;
	margin-bottom:14px;
}
#voucher-multistep-form .secondRightDiv::before{} /* (kept for clarity) */
html body #voucher-multistep-form .secondRightDiv .cardDiv{
/*   background:linear-gradient(135deg,var(--g-card1),var(--g-card2) 70%)!important; */
overflow:hidden;padding:0;border:0;
  box-shadow:0 14px 34px rgba(20,30,22,.28);
}
#voucher-multistep-form .secondRightDiv .cardImgTop img{
  width:100%;display:block;margin:0;border-radius:0;
}
#voucher-multistep-form .secondRightDiv .voucherBottomDiv{
  background:var(--g-card-panel);padding:16px 18px 18px;
}
#voucher-multistep-form .secondRightDiv .voucherBottomDiv h2{display:none}
#voucher-multistep-form .secondRightDiv .voucherBottomDiv label{
  color:var(--g-gold)!important;text-transform:uppercase;letter-spacing:.12em;
  font-size:10px;display:block;margin:0 0 2px;
}
#voucher-multistep-form .secondRightDiv .nameFormLeft,
#voucher-multistep-form .secondRightDiv .nameFormRight,
#voucher-multistep-form .secondRightDiv .voucherValueForm,
#voucher-multistep-form .secondRightDiv .messageForm,
#voucher-multistep-form .secondRightDiv .expiryFormLeft,
#voucher-multistep-form .secondRightDiv .codeFormRight{
  width:100%;float:none;margin:0 0 10px;padding:0;
}
html body #voucher-multistep-form .secondRightDiv .cardDiv input,
html body #voucher-multistep-form .secondRightDiv .cardDiv textarea{
  width:100%;background:transparent!important;border:0!important;
  border-bottom:1px solid rgba(203,167,106,.28)!important;
  color:#e8e3d6!important;font-size:11px;padding:0 0 3px;font-family:var(--g-ui);
}
#voucher-multistep-form .secondRightDiv .cardDiv textarea{
  font-style:italic;color:#cfc9ba!important;border-bottom:0!important;min-height:34px;
}
#voucher-multistep-form .secondRightDiv .voucherValueForm .currencySymbol{color:var(--g-gold-bright)}
#voucher-multistep-form .secondRightDiv .voucherSiteInfo,
#voucher-multistep-form .secondRightDiv .voucherSiteInfo a{color:#9fb0a2!important;font-size:9.5px}
#voucher-multistep-form .secondRightDiv .termsCard{color:#8a978c!important;font-size:9px}

/* =========================================================================
   7. STEP 3 — PAYMENT  (shipping toggle, order summary, gateway select)
   ========================================================================= */
#voucher-multistep-form .shipping-options{
  display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--g-field);
  border-radius:var(--g-radius);overflow:hidden;margin-bottom:6px;
}
#voucher-multistep-form .shipping-options div{
  display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;
  background:#e2e0d7;color:var(--g-ink);cursor:pointer;font-size:13px;font-weight:500;
}
#voucher-multistep-form .shipping-options div+div{border-left:1px solid var(--g-field)}
#voucher-multistep-form .shipping-options div img{width:16px;height:16px;opacity:.7}
html body #voucher-multistep-form .shipping-options div.selected{
  background-color:var(--g-green)!important;color:#fff;
}
html body #voucher-multistep-form .shipping-options div.selected img{filter:brightness(0) invert(1)}

#voucher-multistep-form .order_details_preview{
  background:#fff;border:1px solid var(--g-line);border-radius:6px;padding:18px 20px;margin-top:6px;
}
#voucher-multistep-form .order_details_preview h3{
  font-family:var(--g-display);font-weight:600;font-size:18px;margin:0 0 12px;color:var(--g-ink);
}
#voucher-multistep-form .wpgv_preview_box,
#voucher-multistep-form .wpgv_shipping_box,
#voucher-multistep-form .wpgv_commission_box,
#voucher-multistep-form .wpgv_total_box{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--g-inksoft);padding:7px 0;
}
#voucher-multistep-form .wpgv_total_box{
  border-top:1px solid var(--g-line);margin-top:6px;padding-top:12px;
  color:var(--g-ink);font-weight:500;
}
#voucher-multistep-form .order_details_preview h4{margin:0;font-size:13px;font-weight:500}
#voucher-multistep-form .wpgv-itemtitle{font-family:var(--g-display);font-size:15px}

/* =========================================================================
   8. STEP 4 — OVERVIEW (review + Pay Now)
   ========================================================================= */
#voucher-multistep-form .paymentUserInfo{display:flex;flex-wrap:wrap;gap:14px 18px}
#voucher-multistep-form .paymentUserInfo .full{flex:1 1 100%}
#voucher-multistep-form .paymentUserInfo .half{flex:1 1 calc(50% - 18px)}
html body #voucher-multistep-form .paymentUserInfo .full,
html body #voucher-multistep-form .paymentUserInfo .half{color:var(--g-ink)!important}
#voucher-multistep-form .paymentUserInfo .labelInfo{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--g-label);margin-bottom:3px;
}
#voucher-multistep-form .paymentUserInfo hr{border:0;border-top:1px solid var(--g-line);margin:6px 0;flex:1 1 100%}
#voucher-multistep-form .acceptVoucherTerms{font-size:12.5px;color:var(--g-inksoft);margin:14px 0}
#voucher-multistep-form .acceptVoucherTerms label{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
#voucher-multistep-form .voucherNote{font-size:11.5px;color:var(--g-inksoft);margin-bottom:14px}

/* =========================================================================
   9. BUTTONS  (jQuery-Steps actions + Pay Now + Preview)
   ========================================================================= */
#voucher-multistep-form.wizard>.actions{padding:0;margin-top:18px}
#voucher-multistep-form.wizard>.actions>ul{display:flex;justify-content:flex-end;gap:12px;float:none;margin:0}
#voucher-multistep-form.wizard>.actions>ul>li{float:none;margin:0}
html body #voucher-multistep-form.wizard>.actions a,
html body #voucher-multistep-form.wizard>.actions a:hover,
html body #voucher-multistep-form.wizard>.actions a:active{
  background-color:var(--g-green)!important;border:1px solid var(--g-green);
  color:#fff!important;font-family:var(--g-ui);font-size:16px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;padding:13px 30px;border-radius:0;
  transition:.2s;
}
html body #voucher-multistep-form.wizard>.actions a:hover{background-color:var(--g-green-deep)!important}
/* Previous = ghost */
html body #voucher-multistep-form.wizard>.actions>ul>li:first-child a{
  background:transparent!important;color:var(--g-green)!important;border-color:var(--g-green);
}
#voucher-multistep-form.wizard>.actions .disabled a{opacity:.4;cursor:not-allowed}

html body #voucher-multistep-form #voucherPaymentButton,
html body #voucher-multistep-form .voucherPreviewButton button{
  background-color:var(--g-green)!important;color:#fff;border:0;cursor:pointer;
  font-family:var(--g-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;padding:14px 32px;border-radius:var(--g-radius);transition:.2s;
}
html body #voucher-multistep-form .voucherPreviewButton button{
  background:transparent!important;color:var(--g-green)!important;border:1px solid var(--g-green);
}



/* =========================================================================
   LIVE-PREVIEW CARD — bottom panel: TO / FROM / CODE / MESSAGE only
   ========================================================================= */

/* dark lower panel + decorations (palm bottom-left, gold diagonals bottom-right) */
html body #voucher-multistep-form .secondRightDiv .voucherBottomDiv{
  	position: relative;
    overflow: hidden;
    padding: 32px 80px 32px;
    border-top: 1px solid #B99D75;
    background-image: url(/wp-content/uploads/2026/06/bottom-card-bg.png);
    background-size: 100% 100%;
}


/* hide everything that isn't one of the 4 boxes */
html body #voucher-multistep-form .secondRightDiv .voucherBottomDiv h2,
html body #voucher-multistep-form .secondRightDiv .voucherValueForm,
html body #voucher-multistep-form .secondRightDiv .expiryFormLeft,
html body #voucher-multistep-form .secondRightDiv .voucherSiteInfo,
html body #voucher-multistep-form .secondRightDiv .termsCard,
html body #voucher-multistep-form .secondRightDiv .clearfix{display:none !important}

/* stack + reorder: TO, FROM, CODE, MESSAGE */
html body #voucher-multistep-form .secondRightDiv .uk-form-row{
  display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;
}
html body #voucher-multistep-form .secondRightDiv .nameFormLeft{order:2}
html body #voucher-multistep-form .secondRightDiv .nameFormRight{order:1}
html body #voucher-multistep-form .secondRightDiv .codeFormRight{order:3}
html body #voucher-multistep-form .secondRightDiv .messageForm{order:4}

/* the boxes */
html body #voucher-multistep-form .secondRightDiv .nameFormLeft,
html body #voucher-multistep-form .secondRightDiv .nameFormRight,
html body #voucher-multistep-form .secondRightDiv .codeFormRight,
html body #voucher-multistep-form .secondRightDiv .messageForm{
  width:100%;float:none;margin:0;padding:8px 15px;
  border:1px solid #46554A;border-radius:2px;background:transparent;
}
/* TO / FROM / CODE = label + value on one line */
html body #voucher-multistep-form .secondRightDiv .nameFormLeft,
html body #voucher-multistep-form .secondRightDiv .nameFormRight,
html body #voucher-multistep-form .secondRightDiv .codeFormRight{
  display:flex;align-items:center;gap:10px;
}
/* MESSAGE = label above, text below */
html body #voucher-multistep-form .secondRightDiv .messageForm{
  display:flex;flex-direction:column;gap:8px;
}

/* labels: hide original text, inject TO/FROM/CODE/MESSAGE */
html body #voucher-multistep-form .secondRightDiv .nameFormLeft label,
html body #voucher-multistep-form .secondRightDiv .nameFormRight label,
html body #voucher-multistep-form .secondRightDiv .codeFormRight label,
html body #voucher-multistep-form .secondRightDiv .messageForm label{
  font-size:0;margin:0;padding:0;white-space:nowrap;
}
html body #voucher-multistep-form .secondRightDiv .nameFormLeft label::before,
html body #voucher-multistep-form .secondRightDiv .nameFormRight label::before,
html body #voucher-multistep-form .secondRightDiv .codeFormRight label::before,
html body #voucher-multistep-form .secondRightDiv .messageForm label::before{
  font-family:var(--g-display);font-size:16px;letter-spacing:.05em;
  color:#e6e0d2 !important;font-weight:500;
}
html body #voucher-multistep-form .secondRightDiv .nameFormLeft label::before{content:"FROM:"}
html body #voucher-multistep-form .secondRightDiv .nameFormRight label::before{content:"TO:"}
html body #voucher-multistep-form .secondRightDiv .codeFormRight label::before{content:"CODE:"}
html body #voucher-multistep-form .secondRightDiv .messageForm label::before{content:"MESSAGE:"}

/* values: gold serif */
html body #voucher-multistep-form .secondRightDiv .cardDiv input.forNameCard,
html body #voucher-multistep-form .secondRightDiv .cardDiv input.fromNameCard,
html body #voucher-multistep-form .secondRightDiv .cardDiv input.codeCard{
  flex:1;min-width:0;background:transparent !important;border:0 !important;
  padding:0;color:var(--g-gold-bright) !important;font-family:var(--g-display);
  font-size:18px;font-weight:500;letter-spacing:.02em;    margin: 0;
}
html body #voucher-multistep-form .secondRightDiv .cardDiv textarea.personalMessageCard{
  width:100%;background:transparent !important;border:0 !important;resize:none;padding:0;
  color:var(--g-gold-bright) !important;font-family:var(--g-display);
  font-style:italic;font-size:16px;line-height:1.5;min-height:64px;
}


/* Personalise: two fields per row */
#voucher-multistep-form .gv-row2{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;
}
#voucher-multistep-form .gv-row2 .form-group{margin-bottom:0}
#voucher-multistep-form .mailhidden{display:none !important}
@media (max-width:560px){
  #voucher-multistep-form .gv-row2{grid-template-columns:1fr}
}





#voucher-multistep-form.wizard>.steps .done a{
    background-color: transparent !important;}
#voucher-multistep-form #voucherPaymentButton:hover{background-color:var(--g-green-deep)!important}


.someone_else img {
    display: none !important;
}
.yourself{
	width:100% !important;
}
.buying-options img {
    display: none !important;
}

/* =========================================================================
   10. RESPONSIVE
   ========================================================================= */
@media (max-width:860px){
  #voucher-multistep-form .voucher-row:has(.secondLeft){grid-template-columns:1fr}
  #voucher-multistep-form .secondRightDiv.sideview{max-width:360px;margin:8px auto 0}
  #voucher-multistep-form.wizard>.content>.body{padding:24px 20px}
  #voucher-multistep-form.wizard>.steps a{font-size:0}            /* labels off, keep circles */
  #voucher-multistep-form.wizard>.steps>ul>li:not(:last-child)::after{margin:0 8px}
  #voucher-multistep-form .gv-step-h{font-size:25px}
}
@media (max-width:480px){
  #voucher-multistep-form .voucher-row:has(.sin-template){grid-template-columns:1fr 1fr}
  #voucher-multistep-form .paymentUserInfo .half{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  #voucher-multistep-form.wizard *{transition:none!important}
}

/* =========================================================================
   11. PAYMENT STEP — order summary + Stripe card panel
   ========================================================================= */
#voucher-multistep-form .gv-payment-row{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;
}
#voucher-multistep-form .gv-pay-left{
  display:flex;flex-direction:column;gap:22px;
}
#voucher-multistep-form .gv-pay-order{
  background:transparent;
}
#voucher-multistep-form .gv-order-total-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--g-display);font-size:20px;color:var(--g-ink-h);
  padding:14px 0;border-top:1px solid var(--g-line);border-bottom:1px solid var(--g-line);
  margin:16px 0;
}
#voucher-multistep-form .gv-order-total-row #totalprice{color:var(--g-gold-bright);font-weight:600}

#voucher-multistep-form .gv-card-panel{
  background:#fff;border:1px solid var(--g-line);border-radius:var(--g-radius);
  padding:28px 26px;
}
#voucher-multistep-form .gv-card-head h3{
  font-family:var(--g-display);font-size:24px;margin:0 0 4px;color:var(--g-ink-h);
}
#voucher-multistep-form .gv-card-head p{
  margin:0 0 18px;color:var(--g-inksoft);font-size:14px;
}
#voucher-multistep-form .gv-card-brands{
  display:flex;gap:10px;margin-bottom:18px;
}
#voucher-multistep-form .gv-brand{
  font-size:11px;font-weight:600;letter-spacing:.5px;padding:4px 10px;
  border:1px solid var(--g-line);border-radius:3px;color:var(--g-inksoft);
}
#voucher-multistep-form .gv-card-field{margin-bottom:16px}
#voucher-multistep-form .gv-card-field label{
  display:block;font-size:13px;color:var(--g-label);margin-bottom:6px;
}
#voucher-multistep-form .gv-card-field-split{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
#voucher-multistep-form .gv-stripe-el{
  border:1px solid var(--g-field);border-radius:3px;padding:11px 12px;background:#fff;
}
#voucher-multistep-form .gv-stripe-el.StripeElement--focus{border-color:var(--g-gold-bright)}
#voucher-multistep-form .gv-stripe-el.StripeElement--invalid{border-color:#c0392b}
#voucher-multistep-form .gv-card-hint{margin:6px 0 0;font-size:11px;color:var(--g-inksoft)}
#voucher-multistep-form .gv-card-errors{
  color:#c0392b;font-size:13px;min-height:18px;margin:6px 0 12px;
}
#voucher-multistep-form .gv-pay-btn{
  width:100%;padding:14px 0;border:0;border-radius:var(--g-radius);
  background:var(--g-green-deep);color:var(--g-cream);font-family:var(--g-ui);
  font-size:15px;letter-spacing:.5px;cursor:pointer;transition:background .2s ease;
}
#voucher-multistep-form .gv-pay-btn:hover{background:var(--g-green-soft)}
#voucher-multistep-form .gv-pay-btn.is-loading{opacity:.6;cursor:default}

/* =========================================================================
   12. CONFIRMATION STEP
   ========================================================================= */
#voucher-multistep-form .gv-confirm-wrap{
  max-width:520px;margin:0 auto;text-align:center;
}
#voucher-multistep-form .gv-confirm-livepreview{
  margin:0 auto 26px;
  max-width:340px;
}
/* the cloned .secondRightDiv shouldn't repeat its own "LIVE PREVIEW" label
   or force the side-by-side layout width it uses on the Payment step */
#voucher-multistep-form .gv-confirm-livepreview .secondRightDiv{width:100%;margin:0}
#voucher-multistep-form .gv-confirm-livepreview .priview{display:none}
#voucher-multistep-form .gv-confirm-redirect-note{
  margin-top:16px;font-size:12px;color:var(--g-inksoft);
}
#voucher-multistep-form .gv-confirm-check{
  width:52px;height:52px;line-height:52px;border-radius:50%;
  background:var(--g-green-deep);color:var(--g-cream);font-size:24px;
  margin:0 auto 18px;
}
#voucher-multistep-form .gv-confirm-title{
  font-family:var(--g-display);font-size:28px;color:var(--g-ink-h);margin:0 0 8px;
}
#voucher-multistep-form .gv-confirm-number{
  font-size:13px;color:var(--g-inksoft);margin:0 0 26px;
}
#voucher-multistep-form .gv-confirm-card{
  background:var(--g-card2);border:1px solid var(--g-gold);border-radius:var(--g-radius);
  color:var(--g-cream);padding:26px 24px;text-align:left;margin:0 auto 26px;max-width:340px;
}
#voucher-multistep-form .gv-confirm-card-brand{
  text-align:center;font-size:13px;letter-spacing:2px;color:var(--g-gold-bright);
  text-transform:uppercase;margin-bottom:10px;
}
#voucher-multistep-form .gv-confirm-card-title{
  text-align:center;font-family:var(--g-display);font-size:22px;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:6px;
}
#voucher-multistep-form .gv-confirm-card-amount{
  text-align:center;font-size:24px;color:var(--g-gold-bright);margin-bottom:16px;
}
#voucher-multistep-form .gv-confirm-card-row{
  display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(203,167,106,.3);padding:8px 0;font-size:13px;
}
#voucher-multistep-form .gv-confirm-card-row .lbl{color:var(--g-gold-bright);letter-spacing:1px;font-size:11px}
#voucher-multistep-form .gv-confirm-card-message{font-style:italic}

#voucher-multistep-form .gv-confirm-summary{
  text-align:left;border:1px solid var(--g-line);border-radius:var(--g-radius);
  padding:18px 20px;margin:0 auto 26px;
}
#voucher-multistep-form .gv-confirm-summary h3{
  font-family:var(--g-display);font-size:18px;margin:0 0 12px;color:var(--g-ink-h);
}
#voucher-multistep-form .gv-confirm-summary-row{
  display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--g-inksoft);
}
#voucher-multistep-form .gv-confirm-summary-total{
  border-top:1px solid var(--g-line);margin-top:6px;padding-top:10px;
  font-weight:600;color:var(--g-ink-h);
}
#voucher-multistep-form .gv-confirm-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
#voucher-multistep-form .gv-confirm-btn{
  flex:1 1 auto;padding:12px 18px;border-radius:var(--g-radius);text-align:center;
  font-family:var(--g-ui);font-size:14px;text-decoration:none;cursor:pointer;
  border:1px solid var(--g-green-deep);
}
#voucher-multistep-form .gv-confirm-download,
#voucher-multistep-form .gv-confirm-buy-another{
  background:var(--g-green-deep);color:var(--g-cream);
}
#voucher-multistep-form .gv-confirm-download:hover,
#voucher-multistep-form .gv-confirm-buy-another:hover{background:var(--g-green-soft)}
#voucher-multistep-form .gv-confirm-book{
  background:transparent;color:var(--g-green-deep);
}
#voucher-multistep-form .gv-confirm-book:hover{background:var(--g-panel)}

@media (max-width:860px){
  #voucher-multistep-form .gv-payment-row{grid-template-columns:1fr}
  #voucher-multistep-form .gv-card-field-split{grid-template-columns:1fr}
}

/* =========================================================================
   13. PAYMENT ERROR MODAL (built by assets/js/wpgv-mrk-payment.js)
   ========================================================================= */
.gv-pay-modal{
  position:fixed;inset:0;background:rgba(20,20,20,.55);
  display:flex;align-items:center;justify-content:center;z-index:100000;
}
.gv-pay-modal-box{
  background:#fff;border-radius:var(--g-radius);padding:28px 26px;max-width:360px;
  text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25);
  font-family:var(--g-ui);
}
.gv-pay-modal-msg{margin:0 0 18px;color:#2b2b2b;font-size:15px;line-height:1.5}
.gv-pay-modal-close{
  border:0;padding:10px 22px;border-radius:var(--g-radius);
  background:var(--g-green-deep);color:var(--g-cream);cursor:pointer;font-size:14px;
}
.gv-pay-modal-close:hover{background:var(--g-green-soft)}
