/* =========================================================
   Gift Cards landing page
   One component, two presentation modes:
   1) standalone modal over the website
   2) embedded full-page view inside .profPanel (Settings)
   ========================================================= */

.giftCardsOverlay{
  position:fixed;
  inset:0;
  z-index:1160;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease-out;
}

.giftCardsOverlay[hidden],
.giftCardsPanel[hidden]{
  display:none !important;
}

.giftCardsOverlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.giftCardsBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,5,10,.50);
}

.giftCardsPanel{
  position:relative;
  z-index:1;
  width:min(500px, calc(100vw - 20px));
  max-width:100%;
  height:min(
    780px,
    calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  );
  max-height:calc(
    100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 18px 40px rgba(15,23,42,.22);
  transform:translateY(24px);
  opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

.giftCardsOverlay.is-open .giftCardsPanel{
  transform:translateY(0);
  opacity:1;
}

/* Embedded inside Settings: panel covers the profile content only. */
.profPanel > .giftCardsPanel.is-settings-embedded{
  position:absolute;
  inset:0;
  z-index:20;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  border-radius:inherit;
  box-shadow:none;
  transform:none;
  opacity:1;
}

.giftCardsHeader{
  flex:0 0 auto;
  min-height:58px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#f1f3f5;
  padding:10px 8px;
}

.giftCardsTitle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  margin:0;
  max-width:calc(100% - 190px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(17px, 3vw, 19px);
  font-weight:600;
  color:#000;
  pointer-events:none;
}

.giftCardsCloseBtn{
  width:40px;
  height:40px;
  border:0;
  outline:none;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  border-radius:10px;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  position:relative;
  z-index:2;

  margin-left:4px;
}

.giftCardsMyGiftsBtn{
  min-height:40px;
  border:0;
  background:transparent;
  color:#000;
  font-size:15px;
  font-weight:700;
  padding:0 8px;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  z-index:2;
}

.giftCardsBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  padding:0 0 calc(30px + env(safe-area-inset-bottom, 0px));
}

.giftCardsIntro{
  margin:8px clamp(18px, 3vw, 24px) 0;
  color:#444;
  font-size:15px;
  line-height:1.35;
}

.giftCardsPills{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:18px clamp(18px, 3vw, 24px) 4px;
}

.giftCardsPills::-webkit-scrollbar,
.giftCardsDesignRow::-webkit-scrollbar{
  display:none;
}

.giftCardsPill{
  flex:0 0 auto;
  min-width:60px;
  height:38px;
  border:0;
  border-radius:999px;
  background:#f1f3f5;
  color:#000;
  padding:0 15px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.giftCardsSections{
  margin-top:13px;
}

.giftCardsCategory{
  padding:0 0 25px;
  scroll-margin-top:8px;
}

.giftCardsCategoryHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 clamp(18px, 3vw, 24px);
}

.giftCardsCategoryTitle{
  margin:0;
  color:#000;
  font-size:17px;
  font-weight:600;
  line-height:1.25;
}

.giftCardsSeeAll{
  border:0;
  background:transparent;
  color:#000;
  padding:6px 2px 6px 10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
   
.giftCardsDesignRow{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:8px clamp(18px, 3vw, 24px) 0 clamp(18px, 3vw, 24px);
}

.giftCardsDesign{
  flex:0 0 150px;
  width:150px;
  height:94px;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:#eef0f2;
  padding:0;
  cursor:pointer;
}

.giftCardsDesign img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.giftCardsLoading{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.giftCardsLoading[hidden]{
  display:none !important;
}

.giftCardsSpinner{
  width:30px;
  height:30px;
  border-radius:999px;
  border:3px solid rgba(0,0,0,.14);
  border-top-color:#000;
  animation:giftCardsSpin .8s linear infinite;
}

@keyframes giftCardsSpin{
  to{ transform:rotate(360deg); }
}

.giftCardsError{
  padding:28px 20px;
  text-align:center;
}

.giftCardsErrorText{
  color:#444;
  font-size:14px;
  line-height:1.35;
}

.giftCardsRetryBtn{
  margin-top:14px;
  border:0;
  border-radius:9px;
  background:#000;
  color:#fff;
  padding:10px 18px;
  font-size:14px;
  cursor:pointer;
}

html.giftCardsNoScroll,
body.giftCardsNoScroll{
  overflow:hidden !important;
  height:100% !important;
}

@supports not (height:100dvh){
  .giftCardsPanel{
    height:min(
      780px,
      calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))
    );
    max-height:calc(
      100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
    );
  }
}

/* Phone: same full-screen rule used by Settings and Delivery Address. */
@media (max-width:500px){
  .giftCardsOverlay{
    align-items:stretch;
    justify-content:stretch;
    padding:0;
    overflow:hidden;
  }

  .giftCardsPanel{
    width:100%;
    max-width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
  }

  .giftCardsBackdrop{
    background:rgba(255,255,255,.50);
  }

  .profPanel > .giftCardsPanel.is-settings-embedded{
    border-radius:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .giftCardsOverlay,
  .giftCardsPanel{
    transition:none;
  }
}
/* =========================================================
   Individual Gift Card category
   Mirrors Android GiftCardCategoryActivity:
   - category name centered in header
   - X on left
   - no right-side action
   - full-width vertical designs using the same 150:94 ratio
   ========================================================= */

.giftCardsHeaderSpacer{
  width:40px;
  height:40px;
  flex:0 0 40px;
}

.giftCardsCategoryView{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  background:#fff;

  opacity:0;
  transform:translateY(24px);
  transition:opacity .20s ease-out, transform .20s ease-out;
}

.giftCardsCategoryView[hidden]{
  display:none !important;
}

.giftCardsCategoryView.is-open{
  opacity:1;
  transform:translateY(0);
}

.giftCardsCategoryBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  padding:14px clamp(18px, 3vw, 24px) calc(35px + env(safe-area-inset-bottom, 0px));
}

.giftCardsCategoryDesignList{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.giftCardsCategoryDesign{
  display:block;
  width:100%;
  aspect-ratio:150 / 94;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:#eef0f2;
  padding:0;
  cursor:pointer;
  flex:0 0 auto;
}

.giftCardsCategoryDesign img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (prefers-reduced-motion:reduce){
  .giftCardsCategoryView{
    transition:none;
  }
}
/* =========================================================
   Customize Gift
   Mirrors Android GiftCardCustomize / gift_card_customize.xml
   ========================================================= */

.giftCardsCustomizeView{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  background:#fff;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .20s ease-out, transform .20s ease-out;
}

.giftCardsCustomizeView[hidden]{
  display:none !important;
}

.giftCardsCustomizeView.is-open{
  opacity:1;
  transform:translateY(0);
}

.giftCardsCustomizeHeader{
  background:#f1f3f5;
}

.giftCardsCustomizeBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  padding:12px clamp(18px, 3vw, 24px) calc(35px + env(safe-area-inset-bottom, 0px));
}

.giftCardsCustomizeArt{
  position:relative;
  width:100%;
  aspect-ratio:150 / 94;
  border-radius:12px;
  overflow:hidden;
  background:#eef0f2;
}

.giftCardsCustomizeArt > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.giftCardsChangeDesignBtn{
  position:absolute;
  right:8px;
  bottom:8px;
  height:40px;
  border:0;
  border-radius:999px;
  padding:0 18px;
  background:rgba(255,255,255,.94);
  color:#111;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.giftCardsFieldTitle{
  margin:18px 2px 5px;
  color:#000;
  font-size:16px;
  font-weight:600;
  line-height:1.3;
}

.giftCardsFieldTitle--inline{
  margin:0;
}

.giftCardsAmountField{
  height:52px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:8px;
  background:#f2f2f2;
  padding:0 13px;
}

.giftCardsAmountCurrency{
  color:#555;
  font-size:15px;
}

.giftCardsAmountInput{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#000;
  font-size:15px;
  appearance:textfield;
  -moz-appearance:textfield;
}

.giftCardsAmountInput::-webkit-outer-spin-button,
.giftCardsAmountInput::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.giftCardsAmountInput::placeholder,
.giftCardsTextInput::placeholder,
.giftCardsMessageInput::placeholder{
  color:#888;
}

.giftCardsFieldHint{
  margin:7px 2px 0;
  color:#777;
  font-size:14px;
  font-weight:400;
  line-height:1.3;
}

.giftCardsFieldHint.is-invalid{
  color:#ff3b30;
  font-weight:600;
}

.giftCardsAmountPills{
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:12px 0 0;
}

.giftCardsAmountPills::-webkit-scrollbar{
  display:none;
}

.giftCardsAmountPill{
  flex:0 0 66px;
  width:66px;
  height:46px;
  border:0;
  border-radius:999px;
  background:#f2f2f2;
  color:#000;
  font-size:clamp(15px, 3vw, 14px);
  font-weight:500;
  cursor:pointer;
}

.giftCardsAmountPill.is-selected{
  background:#000;
  color:#fff;
}

.giftCardsFieldHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:30px 2px 5px;
}

.giftCardsFieldHead + .giftCardsTextInput{
  margin-top:0;
}

.giftCardsCount{
  flex:0 0 auto;
  color:#666;
  font-size:13px;
}

.giftCardsTextInput{
  width:100%;
  height:52px;
  border:0;
  outline:0;
  border-radius:8px;
  background:#f2f2f2;
  padding:0 13px;
  color:#000;
  font-size:15px;
  box-sizing:border-box;
}

.giftCardsMessageInput{
  display:block;
  width:100%;
  min-height:88px;
  border:0;
  outline:0;
  border-radius:8px;
  background:#f2f2f2;
  padding:11px 10px;
  color:#111;
  font-size:15px;
  line-height:1.35;
  resize:none;
  box-sizing:border-box;
}

.giftCardsCustomizeAction{
  width:100%;
  height:46px;
  border:0;
  border-radius:8px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.giftCardsCustomizeAction--preview{
  margin-top:18px;
  background:#f2f2f2;
  color:#111;
}

.giftCardsCustomizeAction--checkout{
  margin-top:6px;
  background:#000;
  color:#fff;
}

.giftCardsCustomizeAction:disabled{
  cursor:default;
}

.giftCardsCustomizeAction--preview:disabled{
  background:#f2f2f2;
  color:#aaa;
}

.giftCardsCustomizeAction--checkout:disabled{
  background:#e9e9e9;
  color:#aaa;
}

@media (prefers-reduced-motion:reduce){
  .giftCardsCustomizeView{
    transition:none;
  }
}
/* When Change is tapped from Customize, the category becomes the design picker.
   It must sit above Customize; normal category browsing remains below Customize. */
.giftCardsCategoryView.is-design-picker{
  z-index:30;
}
/* =========================================================
   Gift Preview
   Mirrors Android GiftCardPreview / gift_card_preview.xml
   ========================================================= */

.giftCardsPreviewView{
  position:absolute;
  inset:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  background:#fff;

  opacity:0;
  transform:translateY(24px);
  transition:opacity .20s ease-out, transform .20s ease-out;
}

.giftCardsPreviewView[hidden]{
  display:none !important;
}

.giftCardsPreviewView.is-open{
  opacity:1;
  transform:translateY(0);
}

.giftCardsPreviewHeader{
  background:#fff;
}

.giftCardsPreviewBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  padding:10px clamp(18px, 3vw, 24px) 20px;
}

.giftCardsPreviewCard{
  width:100%;
  overflow:hidden;
  border:1px solid #d9d9d9;
  border-radius:10px;
  background:#fff;
}

.giftCardsPreviewRecipientSees{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  background:#f2f2f2;
  color:#000;
  text-align:center;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}

.giftCardsPreviewInner{
  padding:10px;
}

.giftCardsPreviewArt{
  width:100%;
  aspect-ratio:150 / 94;
  border-radius:12px;
  overflow:hidden;
  background:#eef0f2;
}

.giftCardsPreviewArt img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.giftCardsPreviewAmount{
  margin:8px 2px 0;
  color:#000;
  font-size:32px;
  font-weight:600;
  line-height:1.15;
}

.giftCardsPreviewGreeting{
  margin:5px 2px 10px;
  color:#000;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
}

.giftCardsPreviewMessage{
  margin-top:12px;
  padding:10px;
  border-radius:8px;
  background:#f2f2f2;
  color:#333;
  font-size:14px;
  line-height:1.4;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.giftCardsPreviewMessage[hidden]{
  display:none !important;
}

.giftCardsPreviewTerms{
  margin:20px 2px 0;
  color:#777;
  font-size:14px;
  line-height:1.35;
}

.giftCardsPreviewFooter{
  flex:0 0 auto;
  padding:8px calc(clamp(18px, 3vw, 24px) + env(safe-area-inset-right, 0px))
          calc(20px + env(safe-area-inset-bottom, 0px))
          calc(clamp(18px, 3vw, 24px) + env(safe-area-inset-left, 0px));
  background:#fff;
}

.giftCardsPreviewCloseBottom{
  width:100%;
  height:46px;
  border:0;
  border-radius:10px;
  background:#111b24;
  color:#fff;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}

@media (prefers-reduced-motion:reduce){
  .giftCardsPreviewView{
    transition:none;
  }
}

/* =========================================================
   Gift Card Checkout
   Mirrors Android GiftCardCheckout / gift_card_checkout.xml
   ========================================================= */

.giftCardsCheckoutView{
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  background:#fff;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .20s ease-out, transform .20s ease-out;
}

.giftCardsCheckoutView[hidden]{
  display:none !important;
}

.giftCardsCheckoutView.is-open{
  opacity:1;
  transform:translateY(0);
}

.giftCardsCheckoutHeader{
  background:#f1f3f5;
}

.giftCardsCheckoutBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:18px clamp(18px, 3vw, 24px) 22px;
  background:#fff;
}

.giftCardsCheckoutQuestion{
  color:#000;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
}

.giftCardsCheckoutPillRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.giftCardsCheckoutPill{
  min-width:66px;
  height:42px;
  border:0;
  border-radius:999px;
  padding:0 18px;
  background:#f2f2f2;
  color:#111;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.giftCardsCheckoutPill--wide{
  min-width:105px;
}

.giftCardsCheckoutPill.is-selected{
  background:#000;
  color:#fff;
}

.giftCardsCheckoutHowSend{
  margin-top:26px;
}

.giftCardsCheckoutShareInfo{
  margin-top:20px;
  padding:12px;
  border-radius:8px;
  background:#eef2ff;
}

.giftCardsCheckoutShareInfo[hidden],
.giftCardsCheckoutEmailBlock[hidden],
.giftCardsCheckoutScheduleRow[hidden]{
  display:none !important;
}

.giftCardsCheckoutShareTitle{
  color:#000;
  font-size:15px;
  font-weight:600;
}

.giftCardsCheckoutShareText{
  margin-top:5px;
  color:#444;
  font-size:14px;
  line-height:1.35;
}

.giftCardsCheckoutEmailBlock{
  margin-top:26px;
}

.giftCardsCheckoutEmailInput{
  width:100%;
  height:52px;
  margin-top:10px;
  border:0;
  outline:0;
  border-radius:8px;
  background:#f2f2f2;
  padding:0 14px;
  box-sizing:border-box;
  color:#000;
  font-size:15px;
}

.giftCardsCheckoutEmailInput::placeholder{
  color:#888;
}


.giftCardsCheckoutScheduleRow{
  width:100%;
  min-height:60px;
  margin-top:18px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0;
  color:#000;
  cursor:pointer;
  text-align:left;
}

.giftCardsCheckoutScheduleLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-size:14px;
}

.giftCardsCheckoutClock{
  flex:0 0 22px;
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
}

#giftCardsCheckoutScheduleValue{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.giftCardsCheckoutScheduleAction{
  flex:0 0 auto;
  min-width:84px;
  height:36px;
  border-radius:999px;
  background:#f1f3f5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  padding:0 13px;
  font-size:14px;
}

.giftCardsCheckoutDivider{
  height:1px;
  margin-top:20px;
  background:#e8e8e8;
}

.giftCardsCheckoutLegal{
  margin-top:10px;
  color:#666;
  font-size:12px;
  line-height:1.35;
}

.giftCardsCheckoutTermsLink{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

.giftCardsPreviewTerms{
  margin:20px 2px 0;
  color:#777;
  font-size:14px;
  line-height:1.35;
  text-decoration:underline;
  text-underline-offset:2px;
}

.giftCardsCheckoutLegal + .giftCardsCheckoutLegal{
  margin-top:12px;
}

.giftCardsCheckoutError{
  margin-top:14px;
  color:#c62828;
  font-size:13px;
  line-height:1.35;
  text-align:center;
}

.giftCardsCheckoutError[hidden]{
  display:none !important;
}

.giftCardsCheckoutFooter{
  flex:0 0 auto;
  padding:8px clamp(18px, 3vw, 24px) calc(16px + env(safe-area-inset-bottom, 0px));
  background:#fff;
}

.giftCardsCheckoutBuyBtn{
  position:relative;
  width:100%;
  height:46px;
  border:0;
  border-radius:10px;
  background:#000;
  color:#fff;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
}

.giftCardsCheckoutBuyBtn:disabled{
  background:#eceeef;
  color:#aaa;
  cursor:default;
}

.giftCardsCheckoutBuySpinner{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  transform:translate(-50%, -50%);
  border-radius:999px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:giftCardsSpin .8s linear infinite;
}

.giftCardsCheckoutBuySpinner[hidden]{
  display:none !important;
}

/* ---------------- Schedule bottom sheet ---------------- */

.giftCardsSchedulePicker{
  position:absolute;
  inset:0;
  z-index:80;
  display:flex;
  align-items:flex-end;
  justify-content:center;

  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease-out;
}

.giftCardsSchedulePicker.is-open{
  opacity:1;
  pointer-events:auto;
}

.giftCardsSchedulePicker[hidden]{
  display:none !important;
}

.giftCardsScheduleBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.48);
  opacity:0;
  transition:opacity .22s ease-out;
}

.giftCardsSchedulePicker.is-open .giftCardsScheduleBackdrop{
  opacity:1;
}

.giftCardsSchedulePanel{
  position:relative;
  z-index:1;
  width:100%;
  background:#fff;
  padding:20px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
  border-radius:16px 16px 0 0;

  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.giftCardsSchedulePicker.is-open .giftCardsSchedulePanel{
  transform:translateY(0);
}

.giftCardsScheduleTitle{
  color:#000;
  font-size:18px;
  font-weight:700;
  text-align:center;
}

.giftCardsScheduleTimezone{
  margin-top:4px;
  color:#666;
  font-size:13px;
  text-align:center;
}

.giftCardsScheduleWheelFrame{
  position:relative;
  display:grid;
  grid-template-columns:2.2fr .8fr .8fr .8fr;
  align-items:center;
  gap:6px;
  margin-top:0px;
  min-height:150px;
}

.giftCardsScheduleWheelLine{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#999;
  pointer-events:none;
}

.giftCardsScheduleWheelLine--top{
  top:54px;
}

.giftCardsScheduleWheelLine--bottom{
  bottom:54px;
}

.giftCardsScheduleSelect{
  width:100%;
  height:54px;
  border:0;
  outline:0;
  background:transparent;
  color:#222;
  font-size:16px;
  text-align:center;
  text-align-last:center;
  appearance:auto;
}

.giftCardsScheduleSelect--date{
  font-size:15px;
}

.giftCardsScheduleError{
  margin:-2px 0 10px;
  color:#c62828;
  font-size:13px;
  text-align:center;
}

.giftCardsScheduleError[hidden]{
  display:none !important;
}

.giftCardsScheduleConfirm,
.giftCardsScheduleCancel{
  width:100%;
  height:52px;
  border:0;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.giftCardsScheduleConfirm{
  background:#000;
  color:#fff;
}

.giftCardsScheduleCancel{
  height:50px;
  margin-top:8px;
  background:#f2f2f2;
  color:#d33369;
}

/* ---------------- Stripe Payment Element bottom sheet ---------------- */

.giftCardsPaymentSheet{
  position:absolute;
  inset:0;
  z-index:90;
  display:flex;
  align-items:flex-end;
  justify-content:center;

  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease-out;
}

.giftCardsPaymentSheet.is-open{
  opacity:1;
  pointer-events:auto;
}

.giftCardsPaymentSheet[hidden]{
  display:none !important;
}

.giftCardsPaymentBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,5,10,.30);

  opacity:0;
  transition:opacity .22s ease-out;
}

.giftCardsPaymentSheet.is-open .giftCardsPaymentBackdrop{
  opacity:1;
}

.giftCardsPaymentPanel{
  position:relative;
  z-index:1;

  width:100%;
  max-height:min(96dvh, 800px);

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;

  background:#fff;
  border-radius:20px 20px 0 0;

  box-shadow:0 -8px 24px rgba(0,5,10,.30);

  padding:14px 20px
          calc(22px + env(safe-area-inset-bottom, 0px));

  box-sizing:border-box;

  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.19,1,.22,1);

  will-change:transform;
}

.giftCardsPaymentSheet.is-open .giftCardsPaymentPanel{
  transform:translateY(0);
}

.giftCardsPaymentTop{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  min-height:42px;
}

.giftCardsPaymentCloseBtn{
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
  cursor:pointer;
}

.giftCardsPaymentTitle{
  text-align:center;
  font-size:17px;
  font-weight:600;
  color:#000;
}

.giftCardsPaymentSpacer{
  width:40px;
}

.giftCardsPaymentForm{
  margin-top:10px;
}

#giftCardsPaymentElement{
  width:100%;
  max-width:100%;
  min-height:120px;
}

.giftCardsPaymentError{
  margin:12px 2px 0;
  color:#c62828;
  font-size:13px;
  line-height:1.35;
}

.giftCardsPaymentError[hidden]{
  display:none !important;
}

.giftCardsPaymentPayBtn{
  width:100%;
  height:52px;
  margin-top:16px;
  border:0;
  border-radius:10px;
  background:#0a84ff;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.giftCardsPaymentPayBtn:disabled{
  opacity:.6;
  cursor:default;
}

@media (min-width:500.01px){

  /*
   * Schedule remains a bottom sheet.
   */
  .giftCardsSchedulePicker{
    align-items:flex-end;
    padding:0;
  }

  .giftCardsSchedulePanel{
    width:100%;
    border-radius:16px 16px 0 0;
  }

  /*
   * Stripe also remains a bottom sheet.
   */
  .giftCardsPaymentSheet{
    align-items:flex-end;
    padding:0;
  }

  .giftCardsPaymentPanel{
    width:100%;
    border-radius:20px 20px 0 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .giftCardsCheckoutView{
    transition:none;
  }
}
/* =========================================================
   My Gifts — Sent / Received
   - Uses the same 2-column underline slider behavior as
     CartDetail Delivery / Pickup.
   - Gift rows mirror Android gift_card_sent_item.xml /
     gift_card_received_item.xml.
   ========================================================= */

.giftCardsMyGiftsView{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  background:#fff;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .20s ease-out, transform .20s ease-out;
}

.giftCardsMyGiftsView[hidden]{
  display:none !important;
}

.giftCardsMyGiftsView.is-open{
  opacity:1;
  transform:translateY(0);
}

.giftCardsMyGiftsHeader{
  background:#f1f3f5;
}

/* Same stationary selector pattern used by CartDetail. */
.giftCardsMyGiftsModeWrap{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  margin:0;
  padding:0;
  background:#f1f3f5;
  border-bottom:1px solid #fff;
}

.giftCardsMyGiftsTabs{
  --giftMyUnderlineH:4px;
  --giftMyInactiveUnderline:#e5e7e9;
  --giftMyActiveUnderline:#000;

  position:relative;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
  width:100%;
  height:42px;
  margin:0;
  padding:0;
  gap:0;
  background:transparent;
  overflow:hidden;
}

/* full-width inactive baseline */
.giftCardsMyGiftsTabs::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:var(--giftMyUnderlineH);
  background:var(--giftMyInactiveUnderline);
  pointer-events:none;
  z-index:0;
}

/* active half-width black slider */
.giftCardsMyGiftsTabs::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:50%;
  height:var(--giftMyUnderlineH);
  background:var(--giftMyActiveUnderline);
  transform:translateX(0%);
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
  pointer-events:none;
  z-index:0;
}

.giftCardsMyGiftsTabs.is-sent::after{
  transform:translateX(0%);
}

.giftCardsMyGiftsTabs.is-received::after{
  transform:translateX(100%);
}

.giftCardsMyGiftsTab{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:0 10px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#555;
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:color .18s ease;
  -webkit-tap-highlight-color:transparent;
}

.giftCardsMyGiftsTab.is-active{
  color:#000;
}

.giftCardsMyGiftsBody{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:#fff;
}

.giftCardsMyGiftsContent{
  width:100%;
  height:100%;
}

.giftCardsMyGiftsContent[hidden]{
  display:none !important;
}

.giftCardsMyGiftContent{
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:8px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}

.giftCardsMyGiftContent[hidden]{
  display:none !important;
}

.giftCardsMyGiftList{
  width:100%;
}

.giftCardsMyGiftRow{
  width:calc(100% - 24px);
  min-height:108px;
  margin:6px 12px;
  padding:12px;
  box-sizing:border-box;
  border:1px solid #eceff1;
  border-radius:12px;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  text-align:left;
  cursor:pointer;
  color:#111;
  -webkit-tap-highlight-color:transparent;
}

.giftCardsMyGiftImage{
  flex:0 0 112px;
  width:112px;
  height:76px;
  border-radius:9px;
  object-fit:cover;
  display:block;
  background:#eef0f2;
}

.giftCardsMyGiftImage.is-empty{
  visibility:hidden;
}

.giftCardsMyGiftInfo{
  flex:1 1 auto;
  min-width:0;
  margin-left:13px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.giftCardsMyGiftInfo > span{
  display:block;
  width:100%;
}

.giftCardsMyGiftAmount{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#111;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}

.giftCardsMyGiftParty{
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#333;
  font-size:15px;
  font-weight:400;
  line-height:1.2;
}

.giftCardsMyGiftStatus{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}

.giftCardsMyGiftStatus--green{ color:#087A43; }
.giftCardsMyGiftStatus--red{ color:#B3261E; }
.giftCardsMyGiftStatus--gray{ color:#6A6A6A; }
.giftCardsMyGiftStatus--amber{ color:#A35B00; }
.giftCardsMyGiftStatus--blue{ color:#275D8C; }

.giftCardsMyGiftDate{
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#777;
  font-size:12px;
  font-weight:400;
  line-height:1.2;
}

.giftCardsMyGiftChevron{
  flex:0 0 12px;
  width:12px;
  height:12px;
  margin-left:8px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.55;
}

.giftCardsMyGiftEmpty{
  position:absolute;
  left:24px;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
}

.giftCardsMyGiftEmpty[hidden]{
  display:none !important;
}

.giftCardsMyGiftEmptyTitle{
  color:#111;
  font-size:18px;
  font-weight:600;
}

.giftCardsMyGiftEmptyText{
  margin-top:7px;
  color:#666;
  font-size:14px;
  line-height:1.35;
}

.giftCardsMyGiftsLoading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.giftCardsMyGiftsLoading[hidden]{
  display:none !important;
}

.giftCardsMyGiftsError{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  text-align:center;
  background:#fff;
}

.giftCardsMyGiftsError[hidden]{
  display:none !important;
}

.giftCardsMyGiftsErrorText{
  color:#555;
  font-size:14px;
  line-height:1.35;
}

@media (max-width:420px){
  .giftCardsMyGiftRow{
    min-height:100px;
  }

  .giftCardsMyGiftImage{
    flex-basis:100px;
    width:100px;
    height:68px;
  }

  .giftCardsMyGiftInfo{
    margin-left:11px;
  }

  .giftCardsMyGiftAmount{
    font-size:17px;
  }

  .giftCardsMyGiftParty{
    font-size:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .giftCardsMyGiftsView,
  .giftCardsMyGiftsTabs::after{
    transition:none;
  }
}
/* =========================================================
   Gift Details
   Mirrors Android GiftCardSuccess when opened from My Gifts.
   ========================================================= */

.giftCardsDetailsView{
  position:absolute;
  inset:0;
  z-index:70;
  display:flex;
  flex-direction:column;
  background:#fff;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .20s ease-out, transform .20s ease-out;
}

.giftCardsDetailsView[hidden]{
  display:none !important;
}

.giftCardsDetailsView.is-open{
  opacity:1;
  transform:translateY(0);
}

.giftCardsDetailsHeader{
  background:#f1f3f5;
}

.giftCardsDetailsBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
  padding:20px clamp(18px, 3vw, 24px) 22px;
  box-sizing:border-box;
  text-align:center;
}

.giftCardsDetailsStatusIcon{
  display:block;
  width:54px;
  height:54px;
  margin:0 auto;
  object-fit:contain;
}

.giftCardsDetailsStatusIcon.is-muted{
  filter:grayscale(1);
  opacity:.62;
}

.giftCardsDetailsStatusIcon.is-error{
  filter:grayscale(1);
  opacity:.72;
}

.giftCardsDetailsTitle{
  margin-top:18px;
  color:#000;
  font-size:24px;
  font-weight:600;
  line-height:1.2;
}

.giftCardsDetailsText{
  margin:10px auto 0;
  max-width:430px;
  color:#555;
  font-size:15px;
  line-height:1.4;
}

.giftCardsDetailsCard{
  width:100%;
  margin-top:24px;
  overflow:hidden;
  border-radius:16px;
  background:#f7f7f7;
  text-align:left;
}

.giftCardsDetailsArt{
  width:100%;
  aspect-ratio:150 / 94;
  overflow:hidden;
  background:#eef0f2;
}

.giftCardsDetailsArt img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.giftCardsDetailsCardInfo{
  padding:18px;
}

.giftCardsDetailsAmount{
  color:#000;
  font-size:22px;
  font-weight:600;
  line-height:1.2;
}

.giftCardsDetailsRecipient{
  margin-top:10px;
  color:#000;
  font-size:15px;
  line-height:1.35;
}

.giftCardsDetailsSender{
  margin-top:5px;
  color:#555;
  font-size:14px;
  line-height:1.35;
}

.giftCardsDetailsMessage{
  margin-top:12px;
  color:#333;
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.giftCardsDetailsMessage[hidden]{
  display:none !important;
}

.giftCardsDetailsSummary{
  margin-top:18px;
  padding:14px;
  border-radius:10px;
  background:#f2f4f6;
  color:#333;
  font-size:14px;
  line-height:1.45;
  text-align:left;
  white-space:pre-line;
}

.giftCardsDetailsSummary[hidden]{
  display:none !important;
}

.giftCardsDetailsFooter{
  flex:0 0 auto;
  padding:8px clamp(18px, 3vw, 24px) calc(16px + env(safe-area-inset-bottom, 0px));
  background:#fff;
}

.giftCardsDetailsPrimary,
.giftCardsDetailsSecondary{
  width:100%;
  height:46px;
  border:0;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.giftCardsDetailsPrimary{
  background:#111b24;
  color:#fff;
}

.giftCardsDetailsSecondary{
  margin-top:8px;
  background:#f2f2f2;
  color:#111;
}

.giftCardsDetailsSecondary[hidden]{
  display:none !important;
}

@media (prefers-reduced-motion:reduce){
  .giftCardsDetailsView{
    transition:none;
  }
}