/* ==========================================================================
   Fonts (self-hosted, matches Figma: Inter + Droid Serif)
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Droid Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DroidSerif-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Droid Serif";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/DroidSerif-Bold.woff2") format("woff2");
}
@font-face {
    font-family: 'Devina-Garden';
    src: url('../fonts/Devina-Garden.woff2') format('woff2'),
         url('../fonts/Devina-Garden.woff') format('woff'),
         url('../fonts/Devina-Garden.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
:root {
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-droid-serif: "Droid Serif", Georgia, serif;
}

body {
  font-family: var(--font-inter);
}

/* ==========================================================================
   Form field placeholder color (exact Figma gray #757575)
   ========================================================================== */
.field-input::placeholder,
.field-textarea::placeholder {
  color: #757575;
  opacity: 1;
  font-weight: 400;
}

.field-input,
.field-textarea,
.newsletter-input {
  outline: none;
}

.field-input:focus,
.field-textarea:focus {
  border-color: #4a4f87;
}

/* ==========================================================================
   Doronow wordmark — reproduced from the exact vector fragments exported
   from Figma (bubble mark + letterforms + tagline), laid out with the
   precise relative positions/sizes measured from the design so it scales
   losslessly at any size via percentage-based absolute positioning.
   ========================================================================== */
.logo-mark {
  position: relative;
  aspect-ratio: 194.147 / 52.052;
  display: block;
}

.logo-mark img {
  position: absolute;
  display: block;
  max-width: none;
  width: auto;
  height: auto;
}

.logo-mark .logo-icon {
  left: 2.65%;
  top: 6.25%;
  width: 20.09%;
  height: 82.61%;
}

.logo-mark .logo-letter-1 {
  left: 26.4%;
  top: 12.58%;
  width: 10.785%;
  height: 46.6%;
}

.logo-mark .logo-letter-2 {
  left: 80.46%;
  top: 25.9%;
  width: 14.34%;
  height: 33.27%;
}

.logo-mark .logo-letter-3 {
  left: 37.7%;
  top: 25.42%;
  width: 9.29%;
  height: 34.37%;
}

.logo-mark .logo-letter-4 {
  left: 52.32%;
  top: 25.42%;
  width: 9.29%;
  height: 34.37%;
}

.logo-mark .logo-letter-5 {
  left: 71.46%;
  top: 25.42%;
  width: 9.29%;
  height: 34.37%;
}

.logo-mark .logo-letter-6 {
  left: 62.41%;
  top: 25.29%;
  width: 8.26%;
  height: 33.88%;
}

.logo-mark .logo-letter-7 {
  left: 47.79%;
  top: 25.31%;
  width: 4.46%;
  height: 33.86%;
}

.logo-mark .logo-tagline {
  left: 26.31%;
  top: 65.44%;
  width: 67.91%;
  height: 23.43%;
}

.logo-mark .logo-trademark {
  left: 95.61%;
  top: 25.5%;
  width: 2.44%;
  height: 9.07%;
}

/* ==========================================================================
   Decorative texture / image blends (mix-blend-mode isn't expressible with
   default Tailwind utility values used here, kept together for clarity)
   ========================================================================== */
.panel-texture {
  mix-blend-mode: overlay;
  opacity: 0.3;
}

.hero-photo-overlay {
  mix-blend-mode: overlay;
  opacity: 0.1;
}

/* Mobile field — country-code dropdown (intl-tel-input library) */
.field-input .iti {
  display: block;
  width: 100%;
  height: 100%;
}

.field-input .iti__flag-container {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.field-input .iti__selected-flag {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding: 0 8px 0 16px;
}

.field-input .iti__selected-dial-code {
  color: #757575;
  font-size: 12px;
}

.field-input input[name="mobile"] {
  height: 100%;
  width: 100%;
  border: none;
  background: transparent;
  color: #171d2b;
  font-size: 12px;
  padding-right: 22px;
}

.field-input .iti__country-list {
  font-size: 12px;
  z-index: 30;
}

/* India flag chip (Mobile field prefix) */
.flag-india {
  display: flex;
  flex-direction: column;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.flag-india span {
  display: block;
  width: 100%;
  flex: 1 1 0;
}

.flag-india .stripe-orange {
  background: #ff9933;
}

.flag-india .stripe-white {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-india .stripe-green {
  background: #128807;
}

.flag-india .stripe-white img {
  width: 6px;
  height: 6px;
}

/* ==========================================================================
   About page — composite feature-card icons, reproduced from the exact
   layered vector pieces exported from Figma (each piece positioned as a
   percentage of the icon's own square box so it scales with the icon).
   ========================================================================== */
.icon-credit-card {
  position: relative;
  display: block;
}

.icon-credit-card img {
  position: absolute;
  display: block;
}

.icon-credit-card .cc-outline {
  left: 14.58%;
  top: 27.08%;
  width: 70.84%;
  height: 50%;
}

.icon-credit-card .cc-stripe {
  left: 14.58%;
  top: 43.75%;
  width: 70.84%;
  height: auto;
  transform: translateY(-50%);
}

.icon-credit-card .cc-dot {
  left: 25%;
  top: 62.5%;
  width: 4.17%;
  height: 4.17%;
}

/* ==========================================================================
   Scroll reveal — sections fade + slide up into place as they enter the
   viewport (see js/scroll-reveal.js). Skips the effect entirely for users
   who prefer reduced motion.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.3s ease-out, transform 0.7s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Home — "Explore all gifts" card carousel. Cards sit in one straight line
   (same size, evenly spaced) rather than an arc; only which card sits in
   which slot changes, via js/gift-carousel.js toggling data-slot.
   ========================================================================== */
.gift-stage {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.gift-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 110px;
  margin-left: -55px;
  cursor: pointer;
  transition: transform 750ms cubic-bezier(0.4, 0.06, 0.16, 1);
  will-change: transform;
}

.gift-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.gift-card[data-slot="0"] {
  transform: translate3d(0, 0, 0);
  z-index: 3;
  cursor: default;
}
.gift-card[data-slot="-1"] { transform: translate3d(-122px, 0, 0); z-index: 2; }
.gift-card[data-slot="1"]  { transform: translate3d(122px, 0, 0); z-index: 2; }
.gift-card[data-slot="-2"] { transform: translate3d(-244px, 0, 0); z-index: 1; }
.gift-card[data-slot="2"]  { transform: translate3d(244px, 0, 0); z-index: 1; }

@media (min-width: 768px) and (max-width: 1023px) {
  .gift-stage { height: 160px; }
  .gift-card { width: 150px; margin-left: -75px; }
  .gift-card[data-slot="-1"] { transform: translate3d(-166px, 0, 0); }
  .gift-card[data-slot="1"]  { transform: translate3d(166px, 0, 0); }
  .gift-card[data-slot="-2"] { transform: translate3d(-332px, 0, 0); }
  .gift-card[data-slot="2"]  { transform: translate3d(332px, 0, 0); }
}

@media (min-width: 1024px) {
  .gift-stage { height: 235px; }
  .gift-card { width: 220px; margin-left: -110px; }
  .gift-card[data-slot="-1"] { transform: translate3d(-244px, 0, 0); }
  .gift-card[data-slot="1"]  { transform: translate3d(244px, 0, 0); }
  .gift-card[data-slot="-2"] { transform: translate3d(-488px, 0, 0); }
  .gift-card[data-slot="2"]  { transform: translate3d(488px, 0, 0); }
}

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