@font-face { font-family: 'Chewie'; src: url('../fonts/ChewieDEMO/ChewieDEMO-Bold.woff2') format('woff2'), url('../fonts/ChewieDEMO/ChewieDEMO-Bold.woff') format('woff'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Chewie'; src: url('../fonts/ChewieDEMO/ChewieDEMO-ExtraBold.woff2') format('woff2'), url('../fonts/ChewieDEMO/ChewieDEMO-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; }
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Container + section title */
.gcs-gift-card-block { border: 1px solid #ececec; border-radius: 20px; padding: 20px; margin: 10px 0; background: #ffffff; text-align: center; }
.gcs-gc-title { margin: 10px 0 30px 0; font-weight: 700; font-size: 1.5rem; }
.gcs-gc-empty { color: #6b7280; margin: 8px 0; }

/* List layout + card base */
.gcs-gc-list { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.gcs-gc-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0,0,0,.10); transition: box-shadow .2s ease, transform .2s ease; }
.gcs-gc-item:hover { box-shadow: 0 10px 28px rgba(0,0,0,.18); transform: translateY(-2px); }

/* Poster style inspired card */
.gcs-gc-poster {position: relative; padding-bottom: 12px;  background-color: #c77055; color: #fff; border: none; width: 100%; max-width: 480px; flex: 1 1 100%; }
.gcs-gc-poster-inner { display: flex; flex-direction: column; align-items: center; padding: 40px 26px 10px 26px; gap: 12px; }
.gcs-gc-poster-title { margin: 0; font-family: 'Chewie', serif; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.gcs-gc-poster-value { display: flex; align-items: baseline; gap: 8px; }
.gcs-gc-poster-value-label { font-size: 20px; opacity: 1; color: #fff; letter-spacing: .5px; }
.gcs-gc-poster-price { font-size: 28px; font-weight: 800; color: #fff; font-family: 'Chewie', serif; font-weight: 700;}
.gcs-gc-poster-logo { position: absolute; top: 10px; left: 10px; }
.gcs-gc-poster-logo img { width: 48px; height: 48px; object-fit: contain; display: block; opacity: .95; }
.gcs-gc-details-fab { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: #ffffff; color: #c77055; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: color .2s ease, box-shadow .2s ease, transform .15s ease; }
.gcs-gc-details-fab:hover { box-shadow: 0 4px 10px rgba(0,0,0,.2); color: #a6553e; transform: translateY(-1px) scale(1.05); }
.gcs-gc-details-fab svg { display:block; color: #c77055; }
.gcs-gc-details-fab svg path,
.gcs-gc-details-fab svg circle { stroke: #c77055; }
.gcs-gc-details-fab:hover svg path,
.gcs-gc-details-fab:hover svg circle { stroke: #a6553e; }

/* Actions */
.gcs-gc-actions { margin: 6px 0 4px 0 ; }
.gcs-gc-button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 20px; text-decoration: none; background: #C77055; color: #fff; font-weight: 600; transition: box-shadow .2s, transform .2s, filter .2s; box-shadow: 0 2px 6px rgba(102,126,234,0.25); }
.gcs-gc-button:hover { transform: translateY(-1px); color: #fff; filter: brightness(1.03); }
.gcs-gc-button--reversed { background: #ffffff; color: #c77055; box-shadow: none; }
/* Ensure reversed button keeps brand text color on hover for readability */
.gcs-gc-button--reversed:hover { color: #c77055; background: #ffffff; filter: none; box-shadow: 0 3px 10px rgba(0,0,0,.15); }

/* Responsive */
/* One per row by default; switch to two per row on larger screens */
@media (min-width: 900px) {
  /* Two columns; keep a max width so a single last item is centered and not full-width */
  .gcs-gc-poster { flex: 0 1 calc(50% - 9px); margin-left: auto; margin-right: auto; }
}

/* Chips (compact list preview) */
.gcs-gc-chips-title { margin: 18px auto 2px auto; padding-bottom: 4px; font-size: 14px; font-weight: 600; color: #ffffff; opacity: .95; width: 70%; border-bottom: 1px solid rgba(255,255,255,.45); }
.gcs-gc-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; padding: 0 4px;}
.gcs-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.25); color: #fff; font-size: 13px; border: 1px solid rgba(255,255,255,.5); }
.gcs-chip-more { cursor: pointer; background: #fff; color: #c77055; border-color: #fff; }
.gcs-chip-more:hover { filter: brightness(0.98); }

/* Expandable details panel */
.gcs-gc-details { position: absolute; top: 1%; bottom: 4%; left: 1%; right: 1%; display: none; align-items: center; justify-content: center; pointer-events: auto; z-index: 10;}
.gcs-gc-details-modal { width: 100%; height: 95%; padding-bottom: 2px; background: #ffffff; color: #374151; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.35); text-align: left; overflow: hidden; display: flex; flex-direction: column; }
.gcs-gc-details-header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; pointer-events: auto; }
.gcs-gc-details-close { background: transparent; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b7280; pointer-events: auto; }
.gcs-gc-details-subtitle { margin: 12px 12px 6px 12px; font-size: 16px; font-weight: 700; color: #374151; letter-spacing: .2px; background-color: #f5f5f5; padding: 6px; border-radius: 4px; }
.gcs-gc-details-body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.gcs-gc-details-list { margin: 0; list-style: disc inside; }
.gcs-gc-details-list li, .gcs-gc-details-desc li { margin: 4px 0; font-size: 15px; }
.gcs-gc-details-desc { padding: 12px 12px 6px 16px; font-size: 15px; color: #4b5563; line-height: 1.5; border-bottom: 1px dashed #e5e7eb; margin: 0; }
.gcs-gc-details-desc p { font-size: 15px; }
/* Purchase modal */
.gcs-purchase-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:9999; }
.gcs-purchase-modal{ width:min(620px,92vw); background:#fff; border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.35); text-align:left; box-sizing:border-box; max-height:90vh; overflow:auto }
.gcs-modal-flexible{ max-height:none; }
.gcs-purchase-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 6px 12px 18px; border-bottom:1px solid #e5e7eb; }
.gcs-purchase-header > span{ display:inline-flex; align-items:center; gap:8px; }
.gcs-purchase-header .gcs-step-back{ background:transparent; border:none; line-height:1; cursor:pointer; color:#374151; margin-right:auto; margin-left: -14px; padding:6px; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; }
.gcs-purchase-header .gcs-step-back svg{ width:22px; height:22px; }
.gcs-purchase-form{ padding:12px; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.gcs-form-scroll{ max-height:80vh; overflow:auto; }
.gcs-purchase-form .gcs-field{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:6px; margin-bottom:4px; }

.gcs-purchase-form .gcs-field.gcs-field--stack{ flex-direction:column; align-items:stretch; gap:6px; }
.gcs-purchase-form .gcs-field:not(.gcs-field--stack) .gcs-req{ flex:0 0 10px; width:10px; margin-left:0; }
.gcs-purchase-form .gcs-field:not(.gcs-field--stack) .gcs-label{ flex:0 0 110px; width:110px; }
.gcs-purchase-form .gcs-field:not(.gcs-field--stack) input,
.gcs-purchase-form .gcs-field:not(.gcs-field--stack) textarea,
.gcs-purchase-form .gcs-field:not(.gcs-field--stack) .gcs-select{ flex:1 1 auto; }
.gcs-purchase-form .gcs-req{ color:#c77055; font-weight:700; margin-left:6px; }
.gcs-purchase-form .gcs-noreq{ margin-left:12px; }
.gcs-purchase-form .gcs-field input, .gcs-purchase-form .gcs-field textarea{ width:100%; max-width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:6px; font-size:14px; box-sizing:border-box; flex:1; }
.gcs-purchase-form .gcs-field textarea{ resize: vertical; min-height: 80px; overflow: auto; flex: 0 0 auto; }
.gcs-field--error input, .gcs-field--error textarea, .gcs-field--error .gcs-select{ border-color:#dc2626; box-shadow:0 0 0 1px rgba(220,38,38,.15); }
.gcs-row-spacer{ height: 20px; }
.gcs-payment-step{ padding:12px; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; }
.gcs-step-header{ display:flex; align-items:center; }
/* Inline row for expiry + CVC */
.gcs-card-row{ display:flex; gap:8px; }
.gcs-card-row .gcs-field{ flex:1; display:flex; align-items:center; }
.gcs-address-row{ display:flex; gap:8px; }
.gcs-address-row .gcs-field{ flex:1; display:flex; align-items:center; }
/* Ensure Stripe Elements expand correctly within flex rows */
.gcs-payment-step .gcs-field .gcs-card-number,
.gcs-payment-step .gcs-field .gcs-card-exp,
.gcs-payment-step .gcs-field .gcs-card-cvc,
.gcs-payment-step .gcs-field .gcs-address{ flex:1; min-width:0; }
.gcs-payment-step .StripeElement{ width:100% !important; }
.gcs-address { display:flex; flex-direction:column; margin:8px 0;}
/* Add visible borders around Stripe Elements wrappers for clarity */
.gcs-card-number, .gcs-card-exp, .gcs-card-cvc{ border:1px solid #e5e7eb; border-radius:6px; padding:8px 10px; background:#fff; margin-bottom: 8px;}
/* Native select styling */
.gcs-select{ width:100%; padding:8px 10px; margin-bottom: 8px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; font-size:14px; }
.gcs-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.gcs-btn-primary{ background:#c77055; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }
.gcs-btn-link{ background:transparent; border:none; color:#6b7280; cursor:pointer; }
/* Outline button (border only) */
.gcs-btn-outline{ background:transparent; border:1px solid #c77055; color:#c77055; padding:8px 12px; border-radius:6px; cursor:pointer; }
.gcs-btn-outline:hover{ filter:brightness(0.98); }


.gcs-payment-step { padding:12px; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; }
.gcs-payment-step .gcs-field{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:6px; }
.gcs-payment-step .gcs-req{ color:#c77055; font-weight:700; margin-left:6px; }
.gcs-payment-step .gcs-noreq{ margin-left:12px; }
.gcs-payment-step .gcs-field .gcs-label{ flex:0 0 110px; width:110px; }
.gcs-payment-step .gcs-field .gcs-card-number,
.gcs-payment-step .gcs-field .gcs-card-exp,
.gcs-payment-step .gcs-field .gcs-card-cvc,
.gcs-payment-step .gcs-field .gcs-address{ flex:1 1 auto; }

/* Responsive: stack inline labels/inputs on small screens */
@media (max-width: 560px) {
  .gcs-purchase-form .gcs-field:not(.gcs-field--stack){
    flex-direction: column;
    align-items: stretch;
  }
  .gcs-purchase-form .gcs-field:not(.gcs-field--stack) .gcs-label,
  .gcs-purchase-form .gcs-field:not(.gcs-field--stack) .gcs-req{
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
  }
  .gcs-payment-step .gcs-field{
    flex-direction: column;
    align-items: stretch;
  }
  .gcs-payment-step .gcs-field .gcs-label{
    flex: 0 0 auto;
    width: auto;
  }
}
.gcs-payment-step .gcs-field input, .gcs-payment-step .gcs-field textarea{ width:100%; max-width:100%; padding:8px 10px; margin-bottom: 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:14px; box-sizing:border-box; flex:1; }
.gcs-payment-step .gcs-field textarea{ resize: vertical; min-height: 80px; overflow: auto; flex: 0 0 auto; }
/* Smaller labels for a lighter look */
.gcs-label{ font-size:16px; color:#374151; }
.gcs-payment-step .gcs-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.gcs-payment-step .gcs-btn-primary{ background:#c77055; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer; }
.gcs-payment-step .gcs-btn-link{ background:transparent; border:none; color:#6b7280; cursor:pointer; }

/* Error alert box */
.gcs-error-alert{ display:none; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; padding:12px; margin:8px 0; color:#dc2626; font-size:14px; }
.gcs-error-alert.show{ display:block; }
.gcs-error-alert-icon{ display:inline-block; margin-right:8px; font-weight:bold; }

/* Invalid field styling */
.gcs-field--error input,
.gcs-field--error select,
.gcs-field--error textarea{ border-color:#dc2626; box-shadow:0 0 0 1px #dc2626; }

/* Stripe element invalid styling */
.gcs-field--error .StripeElement{ border-color:#dc2626 !important; box-shadow:0 0 0 1px #dc2626 !important; }

/* Success Modal Styles */
.gcs-success-step{ 
  padding:30px; 
  max-width:460px; 
  margin:0 auto;
}
.gcs-success-header{ text-align:center; margin-bottom:30px; }
.gcs-success-icon{ font-size:64px; margin-bottom:20px; }
.gcs-success-title{ color:#059669; font-size:28px; font-weight:bold; margin:0 0 15px 0; }
.gcs-success-subtitle{ color:#6b7280; font-size:18px; margin:0; line-height:1.5; }

.gcs-gift-card-preview{ margin:30px 0; overflow-x:hidden; }
.gcs-gift-card-main, .gcs-gift-card-details{ 
  background:#c36f57; 
  color:white !important; 
  border-radius:12px; 
  padding:30px 25px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  max-width:500px; 
  margin:0 auto 20px auto;
  position:relative;
  width:100%;
  box-sizing:border-box;
}
.gcs-gift-card-main *, .gcs-gift-card-details *{ color:white !important; }

/* Image background on details card (provide file: assets/images/gift-card-details-bg.png) */
.gcs-gift-card-details{
  overflow:hidden;
  background-image:url('../images/gift-card-details-bg.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/* Ensure content boxes inside details card remain readable on colored background */
.gcs-gift-card-details .gcs-gift-card-info-box,
.gcs-gift-card-details .gcs-gift-card-services,
.gcs-gift-card-details .gcs-gift-card-conditions{
  color:#333 !important;
}
.gcs-gift-card-details .gcs-gift-card-services-list,
.gcs-gift-card-details .gcs-gift-card-conditions-text{
  color:#6b7280 !important;
}

/* Main Gift Card Design */
.gcs-gift-card-title-section{ text-align:center; margin-bottom:20px; }
.gcs-gift-card-main-title{ 
  font-family:'Chewie', Arial, sans-serif; 
  font-size:32px; 
  font-weight:800; 
  margin:0 0 15px 0; 
  text-transform:uppercase;
  letter-spacing:2px;
}
.gcs-gift-card-value-section{ 
  margin-bottom:20px; 
  display:flex; 
  align-items:baseline; 
  justify-content:center; 
  gap:8px; 
  padding:14px 0; 
}
.gcs-gift-card-value-label{ 
  font-family:'Barlow', Arial, sans-serif; 
  font-size:22px; 
  font-weight:600; 
  display:inline-block; 
  margin-bottom:5px;
  opacity:0.9;
}
.gcs-gift-card-price{ 
  font-family:'Chewie', Arial, sans-serif; 
  font-size:32px; 
  font-weight:700; 
  display:inline-block;
}
.gcs-gift-card-logo-section{ text-align:center; }
.gcs-gift-card-logo-full{ max-width:300px; height:auto; }

/* Details Card Design */
.gcs-gift-card-details-title{ 
  font-family:'Chewie', Arial, sans-serif; 
  font-size:20px; 
  font-weight:800; 
  text-align:center; 
  margin:20px 0px 24px 0px; 
  text-transform:uppercase;
  letter-spacing:1px;
}

.gcs-gift-card-info-section{ margin:20px 0px; }
.gcs-gift-card-info-row{ 
  display:flex; 
  align-items:center; 
  margin-bottom:12px; 
  gap:10px;
  flex-wrap: wrap; /* allow wrapping on small screens */
}
.gcs-gift-card-info-label{ 
  font-family: 'Barlow', sans-serif;
  font-size:20px;
  font-weight:400; 
  min-width:100px; 
  flex-shrink:0;
}
.gcs-gift-card-info-box{ 
  background:white; 
  color:#333; 
  padding: 6px 12px;
  border-radius:6px;
  flex:1;
  min-height:20px;
  font-size:18px;
  font-weight:500;
  border:1px solid rgba(255,255,255,0.3);
  word-break: break-word;
}

@media (max-width: 520px) {
  .gcs-gift-card-info-label{ 
    width: 100%; 
    min-width: 0; 
  }
  .gcs-gift-card-logo-full{ max-width:200px; height:auto; }
}

.gcs-gift-card-validity{ margin-bottom:20px; text-align:center; font-family: 'Barlow', sans-serif; }
.gcs-gift-card-valid-until{ 
  font-size:16px; 
  margin:0 0 8px 0; 
  opacity:0.95;
  font-weight:600;
}
.gcs-gift-card-personal{ 
  font-size:14px; 
  margin:0; 
  opacity:0.8;
  font-style:italic;
}

.gcs-gift-card-contact{ 
  text-align:center; 
  border-top:1px solid rgba(255,255,255,0.2); 
  padding-top:8px;
}
.gcs-gift-card-address{ 
  font-family: 'Barlow', sans-serif;
  font-size:14px; 
  margin:0 0 4px 0; 
  opacity:0.95;
}
.gcs-gift-card-phone{ 
  font-family: 'Barlow', sans-serif;
  font-size:14px; 
  margin:0; 
  opacity:0.95;
}

.gcs-gift-card-services, .gcs-gift-card-conditions{ 
  background:#f8f9fa; 
  border:1px solid #e9ecef; 
  border-radius:8px; 
  padding:20px; 
  margin:15px 0; 
  max-width:400px; 
  margin-left:auto; 
  margin-right:auto;
}
.gcs-gift-card-services-title, .gcs-gift-card-conditions-title{ 
  color:#c36f57; 
  font-size:16px; 
  font-weight:bold; 
  margin:0 0 12px 0;
}
.gcs-gift-card-services-list, .gcs-gift-card-conditions-text{ 
  color:#6b7280; 
  font-size:14px; 
  line-height:1.5;
}
/* Compact list styling for services in modal */
.gcs-gift-card-services-list ul{ margin:0; padding-left:18px; }
.gcs-gift-card-services-list li{ margin:2px 0; font-size:14px; line-height:1.3; }

.gcs-success-actions{ 
  display:flex; 
  gap:16px; 
  justify-content:center; 
  margin:35px 0; 
  flex-wrap:wrap;
}
.gcs-btn-secondary{ 
  background:#6b7280; 
  color:#fff; 
  border:none; 
  padding:12px 24px; 
  border-radius:8px; 
  cursor:pointer; 
  font-size:15px; 
  font-weight:600;
  transition:background-color 0.2s ease;
}
.gcs-btn-secondary:hover{ background:#4b5563; }

.gcs-success-footer{ text-align:center; margin-top:25px; }
.gcs-email-notice{ 
  color:#6b7280; 
  font-size:15px; 
  margin:0; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px;
  padding:15px;
  background:#f8f9fa;
  border-radius:8px;
}
.gcs-email-icon{ font-size:18px; }

/* Gift card message block */
.gcs-gift-card-message{ max-width:500px; margin:10px auto 20px auto; }
.gcs-gift-card-message-title{ margin:0 0 8px 0; color:#c36f57; font-size:16px; font-weight:700; }
.gcs-gift-card-message-box{ background:#fbf1e4; border:1px solid #f1e3d0; border-radius:8px; padding:12px 14px; color:#4b5563; line-height:1.5; min-height:18px; word-break: break-word; overflow-wrap: anywhere; word-wrap: break-word; }