/* ============================================
   CHECKOUT LEHE VÄRVISKEEM
   ============================================
   
   Siin saad kergesti muuta kõiki värve!
   Lihtsalt muuda HEX koode (#ffffff jne)
   
   ============================================ */

/* ============================================
   1. PÕHIVÄRVID (TAUST & TEKST)
   ============================================ */

body {
  background: #ffffff !important;        /* Lehe taust - VALGE */
  color: #1a1a1a !important;             /* Põhitekst - TUME MUST */
}

/* ============================================
   2. HEADER (ÜLEMINE OSA)
   ============================================ */

/* Tagasi link */
.checkout-page a[href="./index.html"] {
  color: #333333 !important;             /* "← Tagasi" tekst - TUME HALL */
}

.checkout-page a[href="./index.html"]:hover {
  color: #000000 !important;             /* "← Tagasi" hover - MUST */
}

/* Pealkiri "Tellimus" */
.checkout-page h1 {
  color: #1a1a1a !important;             /* Pealkiri - TUME MUST */
}

/* Keele selector */
#lang-select {
  background: #ffffff !important;        /* Keele selector taust - VALGE */
  color: #333333 !important;             /* Keele selector tekst - TUME HALL */
  border-color: #dddddd !important;      /* Keele selector ääris - HELE HALL */
}

/* ============================================
   3. VORM (KONTAKTANDMED, AADRESS)
   ============================================ */

/* Sektsiooni pealkirjad (h3) */
.form-section h3 {
  color: #1a1a1a !important;             /* "Kontaktandmed", "Tarneaadress" - TUME MUST */
}

/* Välja sildid (labels) */
.form-group label {
  color: #333333 !important;             /* "Eesnimi", "Email" jne - TUME HALL */
}

/* Sisestusväljad */
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.95) !important;  /* Välja taust - PEAAEGU VALGE */
  color: #333333 !important;                      /* Sisestatud tekst - TUME HALL */
  border-color: rgba(0,0,0,0.3) !important;       /* Välja ääris - TUME */
}

/* Placeholder tekst */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999999 !important;             /* Placeholder - HELE HALL */
}

/* Focus olek (kui klikid väljale) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: #ffffff !important;        /* Focus taust - VALGE */
  border-color: #00d4ff !important;      /* Focus ääris - SININE (Stripe värv) */
}

/* ============================================
   4. TARNEVIIS (DELIVERY OPTIONS)
   ============================================ */

/* Tarneviisi nimetus */
.delivery-name {
  color: #333333 !important;             /* "Omniva pakiautomaat" jne - TUME HALL */
}

/* Valitud tarneviis */
.delivery-option input[type="radio"]:checked + label {
  border-color: #00d4ff !important;      /* Valitud ääris - SININE */
  background: rgba(0, 212, 255, 0.1) !important;  /* Valitud taust - HELE SININE */
}

/* ============================================
   5. PAKIAUTOMAAT VALIK
   ============================================ */

/* "Vali pakiautomaat:" pealkiri */
.pickup-selection h4 {
  color: #1a1a1a !important;             /* Pealkiri - TUME MUST */
}

/* Otsinguväli */
#pickup-search {
  background: rgba(255,255,255,0.95) !important;  /* Otsingu taust - PEAAEGU VALGE */
  color: #333333 !important;                      /* Otsingu tekst - TUME HALL */
  border-color: rgba(0,0,0,0.3) !important;       /* Otsingu ääris - TUME */
}

/* Otsi ja Lähedal asuvad nupud */
#search-pickup-btn,
#nearby-pickup-btn,
.nearby-btn {
  background: rgba(0, 212, 255, 0.15) !important;  /* Nupu taust - HELE SININE */
  color: #1a1a1a !important;                       /* Nupu tekst - TUME MUST */
  border-color: rgba(0,0,0,0.2) !important;        /* Nupu ääris - TUME */
}

#search-pickup-btn:hover,
#nearby-pickup-btn:hover,
.nearby-btn:hover {
  background: rgba(0, 212, 255, 0.25) !important;  /* Hover taust - TUMEDAM SININE */
}

/* Pakiautomaat listis */
.pickup-item h4 {
  color: #1a1a1a !important;             /* Pakiautomaadi nimi - TUME MUST */
}

.pickup-item p {
  color: #666666 !important;             /* Pakiautomaadi aadress - KESKMINE HALL */
}

.pickup-item:hover {
  background: rgba(0, 212, 255, 0.08) !important;  /* Hover taust - HELE SININE */
  border-color: rgba(0, 212, 255, 0.5) !important; /* Hover ääris - SININE */
}

.pickup-item.selected {
  background: rgba(0, 212, 255, 0.15) !important;  /* Valitud taust - SININE */
  border-color: #00d4ff !important;                /* Valitud ääris - HELE SININE */
}

/* Valitud pakiautomaat info */
.selected-pickup-info h4 {
  color: #1a1a1a !important;             /* "Valitud pakiautomaat:" - TUME MUST */
}

.selected-pickup-info p {
  color: #333333 !important;             /* Valitud pakiautomaadi info - TUME HALL */
}

/* Kauguse badge */
.pickup-distance {
  background: rgba(0, 212, 255, 0.2) !important;  /* Badge taust - SININE */
  color: #00d4ff !important;                      /* Badge tekst - HELE SININE */
}

/* ============================================
   6. TELLIMUSE KOKKUVÕTE (ORDER SUMMARY)
   ============================================ */

.product-summary h2 {
  color: #1a1a1a !important;             /* "Tellimuse kokkuvõte" - TUME MUST */
}

.product-summary h3 {
  color: #1a1a1a !important;             /* Toote nimi - TUME MUST */
}

.product-summary .description {
  color: #666666 !important;             /* Toote kirjeldus - KESKMINE HALL */
}

.summary-row .label {
  color: #666666 !important;             /* "Vahesumma", "KM" jne - KESKMINE HALL */
}

.summary-row .value {
  color: #1a1a1a !important;             /* Hinnad - TUME MUST */
}

.summary-row.total .label,
.summary-row.total .value {
  color: #000000 !important;             /* "KOKKU" ja summa - MUST */
}

/* ============================================
   7. MAKSENUPUD
   ============================================ */

/* Stripe maksenupp - SININE GRADIENT */
#pay-button {
  background: linear-gradient(135deg, #635bff 0%, #4a42cc 100%) !important;  /* Stripe sinine gradient */
  color: #ffffff !important;                                                 /* Tekst - VALGE */
  border: none !important;
}

#pay-button:hover {
  background: linear-gradient(135deg, #5449e6 0%, #3d36b3 100%) !important;  /* Hover - tumedam */
}

/* ============================================
   8. KAARDID JA KASTID
   ============================================ */

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border-color: rgba(0,0,0,0.12) !important;   /* Kaardi ääris - TUME */
}

.form-section {
  background: rgba(255,255,255,0.02) !important;  /* Sektsiooni taust - PEAAEGU LÄBIPAISTEV */
  border-color: rgba(0,0,0,0.08) !important;      /* Sektsiooni ääris - HELE */
}

/* ============================================
   9. ASUKOHA INFO
   ============================================ */

#location-info {
  background: rgba(255,255,255,0.03) !important;  /* Asukoha info taust */
  border-color: rgba(0,0,0,0.1) !important;       /* Asukoha info ääris */
  color: #333333 !important;                      /* Asukoha tekst - TUME HALL */
}

#location-info p {
  color: #333333 !important;             /* Koordinaadid jne - TUME HALL */
}

#location-info button {
  background: rgba(255,255,255,0.05) !important;  /* Nupu taust */
  color: #1a1a1a !important;                      /* Nupu tekst - TUME MUST */
  border-color: rgba(0,0,0,0.2) !important;       /* Nupu ääris */
}

/* ============================================
   10. AUTOFILL (AUTOMAATSELT TÄIDETUD VÄLJAD)
   ============================================ */

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #333333 !important;
  box-shadow: 0 0 0 30px white inset !important;
}

/* ============================================
   KASUTAMISJUHEND:
   
   1. Värvi muutmiseks kopeeri HEX kood (nt #ffffff)
   2. Asenda uue värviga
   3. Salvesta fail
   4. Uploadi Netlify-sse
   5. Refresh lehte
   
   VÄRVI NÄITED:
   #ffffff - Valge
   #000000 - Must
   #333333 - Tume hall
   #666666 - Keskmine hall
   #999999 - Hele hall
   #00d4ff - Hele sinine (Stripe)
   #635bff - Stripe sinine
   #f0f0f0 - Väga hele hall
   
   Online värvivalija: https://htmlcolorcodes.com/
   ============================================ */