/* Randini Garment: site-wide design layer (matches the header + hero system) */
:root {
  --rgp-navy: #0B2B43;
  --rgp-navy-deep: #071D2E;
  --rgp-mint: #7FC6A4;
  --rgp-mint-hover: #92D2B3;
  --rgp-mint-dark: #3C8E69;
  --rgp-mint-soft: rgba(127, 198, 164, .14);
  --rgp-line: #DCE5EA;
  --rgp-radius: 16px;
  --rgp-ease: cubic-bezier(.23, 1, .32, 1);        /* strong ease-out: entering, responding */
  --rgp-ease-in-out: cubic-bezier(.77, 0, .175, 1); /* on-screen movement: image reveals */
}

/* ---------- Basics ---------- */
html { scroll-behavior: smooth; }
::selection { background: var(--rgp-mint); color: var(--rgp-navy-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rgp-mint) !important; outline-offset: 3px;
}

/* ---------- Cards: one shape, one hover ---------- */
body .rdg-adv-card, body .rdg-why-card, body .rdg-purpose-card, body .rdg-product-card,
body .rg-service-card .elementor-container, body .rg-home-service-card .jkit-icon-box-wrapper {
  border-radius: var(--rgp-radius) !important;
  transition: transform .35s var(--rgp-ease), box-shadow .35s var(--rgp-ease), border-color .35s var(--rgp-ease) !important;
}
body .rdg-adv-card:hover, body .rdg-why-card:hover, body .rdg-purpose-card:hover, body .rdg-product-card:hover,
body .rg-home-service-card .jkit-icon-box-wrapper:hover {
  border-color: var(--rgp-mint) !important;
  box-shadow: inset 0 3px 0 var(--rgp-mint), 0 24px 50px -24px rgba(11, 43, 67, .35) !important;
  transform: translateY(-6px);
}

/* Icon chips on light cards: mint tint */
body .rdg-adv-card:not(:last-child) .rdg-adv-icon, body .rdg-why-icon {
  background: var(--rgp-mint-soft) !important;
  color: var(--rgp-mint-dark) !important;
  border-color: transparent !important;
  border-radius: 12px !important;
}

/* ---------- Services page: product photos ---------- */
body .rdg-product--tshirt .rdg-product-visual { --product-photo: url("/wp-content/uploads/2026/10/randini-tshirts.webp"); }
body .rdg-product--frock .rdg-product-visual { --product-photo: url("/wp-content/uploads/2026/10/randini-frocks.webp"); }
body .rdg-product--blouse .rdg-product-visual { --product-photo: url("/wp-content/uploads/2026/10/randini-blouses.webp"); }
body .rdg-product-card .rdg-product-visual {
  background-image: linear-gradient(180deg, rgba(7, 29, 46, .35) 0%, rgba(7, 29, 46, 0) 35%, rgba(7, 29, 46, 0) 65%, rgba(7, 29, 46, .55) 100%), var(--product-photo) !important;
  background-size: 100% auto, cover !important;
}
body .rdg-product-card .rdg-product-icon { display: none !important; }
body .rdg-product-card .rdg-product-visual-number, body .rdg-product-card .rdg-product-visual-label { color: #fff !important; }
body .rdg-product-card:hover .rdg-product-footer-icon { background: var(--rgp-mint) !important; color: var(--rgp-navy-deep) !important; }

/* ---------- Images inside service cards: gentle zoom ---------- */
body .rg-service-card .elementor-widget-image { overflow: hidden; border-radius: 12px; }
body .rg-service-card .elementor-widget-image img { transition: transform .8s var(--rgp-ease); }
body .rg-service-card .elementor-container:hover .elementor-widget-image img { transform: scale(1.04); }

/* ---------- Contact form ---------- */
body .elementor-form .elementor-field-group .elementor-field-textual.elementor-field-textual, body .elementor-form .elementor-field-group .elementor-select-wrapper select.elementor-field-textual {
  border: 1px solid var(--rgp-line) !important;
  border-radius: 10px !important;
  background: #F8FAFB !important;
  min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body .elementor-form .elementor-field-group .elementor-field-textual.elementor-field-textual:focus, body .elementor-form .elementor-field-group .elementor-select-wrapper select.elementor-field-textual:focus {
  border-color: var(--rgp-mint) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--rgp-mint-soft) !important;
  outline: none !important;
}
body .elementor-form .elementor-field-label { font-weight: 600; color: var(--rgp-navy); }

/* ---------- Scroll reveal (classes added by polish.js only) ---------- */
.rgp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--rgp-ease), transform .8s var(--rgp-ease); transition-delay: var(--rgp-delay, 0s); }
.rgp-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Back to top ---------- */
.rgp-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: var(--rgp-mint); color: var(--rgp-navy-deep); cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -12px rgba(7, 29, 46, .55);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s var(--rgp-ease), transform .3s var(--rgp-ease), visibility 0s linear .3s, background .2s;
}
.rgp-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--rgp-ease), transform .3s var(--rgp-ease), background .2s; }
.rgp-top:hover { background: var(--rgp-mint-hover); }
.rgp-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rgp-reveal { opacity: 1; transform: none; transition: none; }
  body .rdg-adv-card:hover, body .rdg-why-card:hover, body .rdg-purpose-card:hover, body .rdg-product-card:hover,
  body .rg-home-service-card .jkit-icon-box-wrapper:hover { transform: none; }
  body .rg-service-card .elementor-widget-image img { transition: none; }
}

/* ==========================================================================
   Motion pass (design engineering): one easing family, transform/opacity only,
   press feedback everywhere, hover motion only for mouse users
   ========================================================================== */

/* Cards: quicker response; lift only with a real pointer */
body .rdg-adv-card, body .rdg-why-card, body .rdg-purpose-card, body .rdg-product-card,
body .rg-service-card .elementor-container, body .rg-home-service-card .jkit-icon-box-wrapper {
  transition: transform 250ms var(--rgp-ease), box-shadow 250ms ease, border-color 200ms ease !important;
}
body .rdg-adv-card:hover, body .rdg-why-card:hover, body .rdg-purpose-card:hover, body .rdg-product-card:hover,
body .rg-home-service-card .jkit-icon-box-wrapper:hover { transform: none; }
body .rg-service-card .elementor-container:hover .elementor-widget-image img { transform: none; }
@media (hover: hover) and (pointer: fine) {
  body .rdg-adv-card:hover, body .rdg-why-card:hover, body .rdg-purpose-card:hover, body .rdg-product-card:hover,
  body .rg-home-service-card .jkit-icon-box-wrapper:hover { transform: translateY(-4px); }
  body .rg-service-card .elementor-container:hover .elementor-widget-image img { transform: scale(1.03); }
}
body .rg-service-card .elementor-widget-image img { transition: transform 600ms var(--rgp-ease); }

/* Scroll reveal: shorter travel, faster, a touch of blur to soften the fade */
.rgp-reveal { transform: translateY(16px); filter: blur(4px); transition: opacity 600ms var(--rgp-ease), transform 600ms var(--rgp-ease), filter 500ms ease; transition-delay: var(--rgp-delay, 0s); }
.rgp-reveal.is-visible { transform: none; filter: none; }

/* Photos uncover from the bottom as they scroll in */
.rgp-clip { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--rgp-ease-in-out); transition-delay: var(--rgp-delay, 0s); }
.rgp-clip.is-visible { clip-path: inset(0 0 0 0); }

/* Elementor's own entrance animations: same feel as everything else
   (they were 2s and travelled the full element width) */
body .animated { animation-duration: 700ms !important; animation-timing-function: cubic-bezier(.23, 1, .32, 1) !important; }
body .animated.animated-slow { animation-duration: 900ms !important; }
@keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0, 24px, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(24px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes fadeInDown  { from { opacity: 0; transform: translate3d(0, -24px, 0); } to { opacity: 1; transform: none; } }

/* Back to top: enters from slightly smaller, presses down */
.rgp-top { transform: translateY(8px) scale(0.95); }
.rgp-top.is-shown { transform: none; }
.rgp-top { transition: opacity 250ms var(--rgp-ease), transform 250ms var(--rgp-ease), visibility 0s linear 250ms, background 200ms ease; }
.rgp-top.is-shown { transition: opacity 250ms var(--rgp-ease), transform 250ms var(--rgp-ease), background 200ms ease; }
.rgp-top:active { transform: scale(0.97); transition-duration: 120ms; }

/* Product cards: arrow nudges toward its direction */
body .rdg-product-card .rdg-product-footer-icon { transition: transform 200ms var(--rgp-ease), background 200ms ease, color 200ms ease !important; }

/* Reduced motion: keep gentle fades, drop movement */
@media (prefers-reduced-motion: reduce) {
  .rgp-reveal { opacity: 0; transform: none; filter: none; transition: opacity 300ms ease; }
  .rgp-reveal.is-visible { opacity: 1; }
  .rgp-clip { clip-path: none; transition: none; }
  body .animated { animation-name: fadeIn !important; animation-duration: 300ms !important; }
  .rgp-top, .rgp-top.is-shown, .rgp-top:active { transform: none; }
}