/* =========================================================
   CandyCloud — DELIVERY POLICY PAGE
   Matches Privacy page design system
========================================================= */

/* =========================================================
   DESIGN TOKENS (aligned with About/Checkout/Privacy)
========================================================= */

:root{
    --cc-max: 1200px;
    --cc-radius: 24px;
    --cc-radius-sm: 16px;
    --cc-radius-lg: 32px;
    --cc-border: rgba(242, 244, 255, 0.15);
    --cc-glass: rgba(19, 18, 26, 0.4);
    --cc-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    --cc-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
    --cc-shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.5);
  
    --cc-primary: #FF2F92;
    --cc-primary-dark: #C77DFF;
    --cc-primary-alt: #8F5BFF;
    --cc-text: #C6C9E3;
    --cc-text-light: #8B90B6;
    --cc-text-heading: #F2F4FF;
    --cc-bg: #0B0B10;
    --cc-bg-alt: #12121A;
    --cc-bg-card: #191A23;
    --cc-gunmetal: #191A23;
    --cc-gunmetal-light: #1E1F2A;
    --cc-gunmetal-dark: #12121A;
    --cc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* =========================================================
     WRAPPER & CONTAINER
  ========================================================= */
  
  .cc-deliveryPage{
    background: var(--cc-bg);
    color: var(--cc-text);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  .cc-container{
    max-width: var(--cc-max);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .cc-section{
    padding: 90px 0;
  }
  
  /* =========================================================
     HERO
  ========================================================= */
  
  .cc-deliveryHero{
    background: linear-gradient(135deg, var(--cc-gunmetal-dark) 0%, var(--cc-gunmetal) 100%);
    padding: 96px 0 76px;
    position: relative;
    overflow: hidden;
  }
  
  .cc-deliveryHero::before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255, 47, 146, 0.10) 0%, transparent 55%);
    pointer-events: none;
  }
  
  .cc-deliveryHero__content{
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  
  .cc-deliveryHero__kicker{
    display: inline-block;
    font-size: clamp(12px, 1.8vw, 16px);
    font-weight: 700;
    color: var(--cc-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    padding: 10px 22px;
    background: rgba(255, 47, 146, 0.10);
    border-radius: 999px;
    border: 1px solid rgba(255, 47, 146, 0.22);
    backdrop-filter: blur(10px);
  }
  
  .cc-deliveryHero__title{
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 900;
    margin: 0 0 20px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--cc-text-heading) 0%, var(--cc-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .cc-deliveryHero__description{
    font-size: clamp(16px, 2.2vw, 20px);
    color: var(--cc-text);
    line-height: 1.8;
    margin: 0 auto 16px;
  }
  
  .cc-deliveryHero__meta{
    margin: 0;
    color: var(--cc-text-light);
    font-size: 14px;
  }
  
  .cc-deliveryHero__meta strong{
    color: var(--cc-text-heading);
  }
  
  /* =========================================================
     INTRO (TEXT + IMAGE)
  ========================================================= */
  
  .cc-deliveryIntro{
    background: var(--cc-bg);
  }
  
  .cc-deliveryIntro__grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
  }
  
  .cc-deliveryIntro__title{
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 900;
    color: var(--cc-text-heading);
    margin: 0 0 18px;
    line-height: 1.15;
  }
  
  .cc-deliveryIntro__body{
    margin: 0 0 16px;
    line-height: 1.8;
    font-size: clamp(15px, 2vw, 18px);
    color: var(--cc-text);
  }
  
  .cc-deliveryIntro__body:last-child{
    margin-bottom: 0;
  }
  
  .cc-deliveryIntro a,
  .cc-deliveryPolicy a{
    color: #2EF2FF;
    text-decoration: none;
    transition: var(--cc-transition);
  }
  
  .cc-deliveryIntro a:hover,
  .cc-deliveryPolicy a:hover{
    color: var(--cc-primary);
    text-decoration: underline;
  }
  
  .cc-deliveryIntro__media{
    margin: 0;
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    border: 1px solid rgba(242, 244, 255, 0.10);
    box-shadow: var(--cc-shadow-soft);
    background: linear-gradient(135deg, var(--cc-gunmetal-light) 0%, var(--cc-gunmetal) 100%);
    display: grid;
    place-items: center;
    padding: 18px;
  }
  
  .cc-deliveryIntro__media img{
    width: min(420px, 100%);
    height: auto;
    display: block;
    object-fit: contain;
  }
  
  /* =========================================================
     POLICY CARD
  ========================================================= */
  
  .cc-deliveryPolicy{
    background: var(--cc-gunmetal-dark);
  }
  
  .cc-deliveryPolicy__card{
    background: linear-gradient(135deg, var(--cc-gunmetal) 0%, var(--cc-gunmetal-light) 100%);
    border-radius: var(--cc-radius-lg);
    border: 1px solid rgba(242, 244, 255, 0.10);
    box-shadow: var(--cc-shadow);
    padding: 54px;
    position: relative;
    overflow: hidden;
  }
  
  .cc-deliveryPolicy__card::before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 15%, rgba(199, 125, 255, 0.10) 0%, transparent 50%);
    pointer-events: none;
  }
  
  .cc-deliveryPolicy__header{
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
  }
  
  .cc-deliveryPolicy__title{
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    margin: 0 0 14px;
    line-height: 1.15;
    background: linear-gradient(135deg, var(--cc-text-heading) 0%, var(--cc-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .cc-deliveryPolicy__lead{
    margin: 0;
    color: var(--cc-text);
    line-height: 1.8;
    font-size: clamp(15px, 2vw, 18px);
  }
  
  .cc-deliveryPolicy__divider{
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 47, 146, 0.35) 50%, transparent 100%);
    margin: 26px 0;
    position: relative;
    z-index: 1;
  }
  
  /* =========================================================
     TOC
  ========================================================= */
  
  .cc-deliveryToc{
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 18px 18px;
    border-radius: var(--cc-radius);
    border: 1px solid rgba(242, 244, 255, 0.10);
    background: rgba(11, 11, 16, 0.35);
    backdrop-filter: blur(10px);
  }
  
  .cc-deliveryToc__title{
    margin: 0 0 12px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cc-text-heading);
  }
  
  .cc-deliveryToc__list{
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
  }
  
  .cc-deliveryToc__list a{
    color: var(--cc-text);
  }
  
  .cc-deliveryToc__list a:hover{
    color: var(--cc-primary);
  }
  
  /* =========================================================
     BODY CONTENT
  ========================================================= */
  
  .cc-deliveryPolicy__body{
    position: relative;
    z-index: 1;
  }
  
  .cc-deliverySection h3{
    margin: 0 0 10px;
    color: var(--cc-text-heading);
    font-size: 22px;
  }
  
  .cc-deliverySection p{
    margin: 0 0 14px;
    color: var(--cc-text);
    line-height: 1.85;
    font-size: 16px;
  }
  
  .cc-deliverySection ul,
  .cc-deliverySection ol{
    margin: 0 0 14px;
    padding-left: 22px;
    color: var(--cc-text);
    line-height: 1.85;
  }
  
  .cc-deliverySection li{
    margin: 0 0 6px;
  }
  
  .cc-deliveryPolicy__body hr{
    border: 0;
    height: 1px;
    background: rgba(242, 244, 255, 0.10);
    margin: 26px 0;
  }
  
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  
  @media (max-width: 1024px){
    .cc-container{ padding: 0 20px; }
    .cc-section{ padding: 74px 0; }
    .cc-deliveryPolicy__card{ padding: 44px 34px; }
    .cc-deliveryIntro__grid{ grid-template-columns: 1fr; gap: 24px; }
    .cc-deliveryIntro__media{ padding: 14px; }
  }
  
  @media (max-width: 768px){
    .cc-container{ padding: 0 16px; }
    .cc-deliveryHero{ padding: 72px 0 56px; }
    .cc-section{ padding: 62px 0; }
    .cc-deliveryPolicy__card{ padding: 34px 20px; border-radius: 24px; }
  }
  
  @media (max-width: 480px){
    .cc-deliveryHero__kicker{ padding: 8px 18px; }
    .cc-deliverySection h3{ font-size: 20px; }
    .cc-deliverySection p{ font-size: 15px; }
  }
  
  @media (prefers-reduced-motion: reduce){
    *{ transition-duration: 0.01ms !important; }
  }