/* ═══════════════════════════════════════════
   SURFF in Beauty — Depth & Elevation System
   입체감 + 음영 + 호버 인터랙션
   ═══════════════════════════════════════════ */

/* ── 1. Navigation ── */
.surff-nav {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
}
.gsq-nav-override {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* ── 2. Hero CTA Buttons ── */
/* Main page hero "Work with us" */
a[class*="border-white"][class*="bg-black"] {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
  transition: all 0.3s !important;
}
a[class*="border-white"][class*="bg-black"]:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* Nav CTA buttons */
.surff-nav-cta, .gsq-nav-cta {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  transition: all 0.3s !important;
}
.surff-nav-cta:hover, .gsq-nav-cta:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}

/* All dark CTA buttons (general) */
a[class*="bg-[#1d1c1c]"], button[class*="bg-[#1d1c1c]"] {
  box-shadow: 0 2px 8px rgba(29,28,28,0.2);
  transition: all 0.3s !important;
}
a[class*="bg-[#1d1c1c]"]:hover, button[class*="bg-[#1d1c1c]"]:hover {
  box-shadow: 0 6px 20px rgba(29,28,28,0.3);
  transform: translateY(-1px);
}

/* ── 3. Solution Cards (main page white cards with inset border) ── */
div[class*="shadow-[inset_0_0_0_0.5px"] {
  box-shadow: inset 0 0 0 0.5px #ddd, 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06) !important;
  transition: all 0.35s ease !important;
}
div[class*="shadow-[inset_0_0_0_0.5px"]:hover {
  box-shadow: inset 0 0 0 0.5px #ccc, 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.1) !important;
  transform: translateY(-3px);
}
/* Dark card exception */
div[class*="bg-[#392903]"][class*="shadow-[inset"] {
  box-shadow: inset 0 0 0 0.5px #392903, 0 4px 16px rgba(57,41,3,0.2), 0 12px 32px rgba(57,41,3,0.15) !important;
}
div[class*="bg-[#392903]"][class*="shadow-[inset"]:hover {
  box-shadow: inset 0 0 0 0.5px #392903, 0 8px 24px rgba(57,41,3,0.25), 0 20px 48px rgba(57,41,3,0.2) !important;
  transform: translateY(-3px);
}

/* ── 4. Solution Step Buttons (rounded icons) ── */
button[class*="rounded-[10px]"][class*="border"][class*="bg-white"] {
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.07) !important;
  transition: all 0.3s ease !important;
}
button[class*="rounded-[10px]"][class*="border"][class*="bg-white"]:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.12) !important;
  transform: translateY(-3px);
}

/* ── 5. Images with depth ── */
/* Solution detail images */
div[class*="aspect-video"] img,
div[class*="aspect-["] img {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 12px 32px rgba(0,0,0,0.08);
  transition: box-shadow 0.4s ease;
}
div[class*="aspect-video"]:hover img,
div[class*="aspect-["]:hover img {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 20px 48px rgba(0,0,0,0.1);
}

/* Standalone images in content sections */
img[class*="object-cover"]:not([class*="absolute"]):not([class*="inset"]) {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);
}

/* ── 6. Stats / Number Section ── */
div[class*="border-t"][class*="border-[#e8e7e5]"] {
  position: relative;
}

/* ── 7. Price Page Specific ── */
/* Hero banner */
.opflow-hero {
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* Process step circles */
.opflow-step-icon {
  box-shadow: 0 3px 12px rgba(57,41,3,0.12), 0 6px 20px rgba(57,41,3,0.08) !important;
  transition: all 0.3s ease !important;
}
.opflow-step:hover .opflow-step-icon {
  box-shadow: 0 6px 20px rgba(57,41,3,0.18), 0 12px 32px rgba(57,41,3,0.12) !important;
  transform: translateY(-2px);
}

/* Shipping line cards */
.logi-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}
.logi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px);
}

/* Schedule table */
.logi-table-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

/* Tab buttons */
.logi-tab-btn {
  transition: all 0.25s ease !important;
}
.logi-tab-btn.active, .logi-tab-btn:hover {
  box-shadow: 0 2px 8px rgba(57,41,3,0.15);
}

/* Calculator section */
.logi-panel {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.07) !important;
  transition: box-shadow 0.3s ease !important;
}
.logi-panel:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.1) !important;
}

/* Calculator result bar */
.logi-total-bar {
  box-shadow: 0 -4px 20px rgba(57,41,3,0.15), 0 4px 16px rgba(57,41,3,0.2) !important;
}

/* Cargo type buttons on price page */
.logi-seq-btn {
  transition: all 0.25s ease !important;
}
.logi-seq-btn:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* Input fields subtle inner shadow */
.logi-input, .logi-select,
input[class*="border"][class*="padding"],
select[class*="border"] {
  transition: all 0.2s ease !important;
}
.logi-input:focus, .logi-select:focus {
  box-shadow: 0 0 0 3px rgba(57,41,3,0.08), 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* ── 8. INCI Page Specific ── */
/* Search input */
.inci-search-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.3s ease !important;
}
.inci-search-wrap:focus-within {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.1) !important;
}

/* Result cards */
.inci-result-card, .inci-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}
.inci-result-card:hover, .inci-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 12px 36px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px);
}

/* Country flag buttons */
.inci-country-btn {
  transition: all 0.25s ease !important;
}
.inci-country-btn:hover, .inci-country-btn.active {
  box-shadow: 0 2px 8px rgba(57,41,3,0.12);
  transform: translateY(-1px);
}

/* Regulation table */
.inci-table-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}

/* Badges */
.inci-badge {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* ── 9. Shared / General ── */
/* Section dividers - subtle top shadow */
section[class*="bg-white"] {
  box-shadow: 0 -1px 0 rgba(0,0,0,0.04);
}

/* Footer depth */
footer, .surff-footer, div[class*="bg-[#1d1c1c]"][class*="text-white"] {
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

/* Generic cards/panels with white background and border */
div[style*="border: 1px solid #ededed"], div[style*="border:1px solid #ededed"] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* Contact widget float button extra depth */
.cw-float-btn {
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 8px 32px rgba(0,0,0,0.15) !important;
}
.cw-float-btn:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 12px 40px rgba(0,0,0,0.2) !important;
}

/* ── 10. Subtle section background layering ── */
section + section {
  position: relative;
}