/* ============================================
   js/customer_app/customer_app_home_screens.css
   Οθόνες «Κεντρική» και «Γιατί εμάς» της Αρχικής σελίδας: πλέγμα φωτογραφιών, ραδιόκουμπιά, γραμμές-τικ, μετρητής, ζωγραφιά.
   Ίδιο ύφος σε κινητό και υπολογιστή (docs/design/fason/). Εντάξει #1F6B33 · θέλει προσοχή #9A3412. Στόχοι αφής ≥ 44px.
   ============================================ */

/* Πλέγμα φωτογραφιών */
.cah-photogrid { display: grid; gap: 8px; margin: 10px 0; }
.cah-ptile { position: relative; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 2px solid #CBD5E1; border-radius: 10px; background: #FFFFFF; font: inherit; cursor: pointer; }
.cah-ptile.is-on { border-color: #000000; box-shadow: 0 0 0 2px #000000; }
.cah-ptile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cah-ptile:focus-visible, .cah-radio:focus-visible, .cah-tick:focus-visible, .cah-text-in:focus-visible, .cah-num:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }
.cah-ptick { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #000000; color: #FFFFFF; font-weight: 700; }
.cah-pold { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 14px; background: #FFF1E6; color: #9A3412; overflow-wrap: anywhere; }
.cah-pnone-text { display: block; padding: 6px; font-weight: 600; overflow-wrap: anywhere; }
.cah-ptile-none { background: #F1F5F9; }

/* Ραδιόκουμπιά συνθήματος */
.cah-radios { margin: 8px 0; }
.cah-radio { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 4px; border: 0; border-top: 1px solid #E2E8F0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.cah-radio:first-child { border-top: 0; }
.cah-dot { flex: none; width: 22px; height: 22px; border: 2px solid #475569; border-radius: 50%; box-sizing: border-box; }
.cah-radio.is-on .cah-dot { border-color: #000000; background: radial-gradient(#000000 0 45%, #FFFFFF 50%); }
.cah-radio-text { min-width: 0; overflow-wrap: anywhere; }

/* Πεδία κειμένου με μετρητή */
.cah-text-in { width: 100%; min-height: 48px; padding: 8px 12px; font: inherit; border: 2px solid #94A3B8; border-radius: 10px; box-sizing: border-box; }
.cah-count { display: block; margin-top: 2px; font-size: 15px; color: #4B5563; text-align: right; }

/* Ζωγραφιά «Έτσι θα φαίνεται» */
.cah-hp { position: relative; height: 300px; max-width: 100%; overflow: hidden; border-radius: 14px; background-size: cover; background-position: center; }
.cah-hp-strip { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 16px; background: rgba(15, 23, 42, 0.72); color: #FFFFFF; }
.cah-hp-strip p { margin: 0; }
.cah-hp-eyebrow { font-size: 14px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.cah-hp-name { display: block; margin: 2px 0; font-size: 22px; overflow-wrap: anywhere; }
.cah-hp-tagline { font-size: 16px; overflow-wrap: anywhere; }
.cah-hp-cta { display: inline-block; margin-top: 10px; padding: 12px 18px; border-radius: 10px; font-weight: 700; }

/* Γιατί εμάς: μετρητής και γραμμές-τικ */
.cah-meter { margin: 0 0 6px; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.cah-meter.is-good { background: #E8F5EC; color: #1F6B33; }
.cah-meter.is-low { background: #FFF1E6; color: #9A3412; }
.cah-advs { list-style: none; margin: 10px 0 0; padding: 0; }
.cah-adv { padding: 4px 0; border-top: 1px solid #E2E8F0; }
.cah-adv:first-child { border-top: 0; }
.cah-tick { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 4px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.cah-tick:disabled { opacity: 0.45; cursor: not-allowed; }
.cah-box { flex: none; width: 28px; height: 28px; line-height: 24px; text-align: center; border: 2px solid #475569; border-radius: 6px; box-sizing: border-box; color: transparent; font-weight: 700; }
.cah-tick.is-on .cah-box, .cah-box.is-on { background: #000000; border-color: #000000; color: #FFFFFF; }
.cah-adv-body { display: block; min-width: 0; flex: 1 1 auto; }
.cah-adv-title { display: block; overflow-wrap: anywhere; }
.cah-adv-line { overflow-wrap: anywhere; }
.cah-adv-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 4px 4px 44px; }
.cah-num { width: 76px; min-height: 48px; padding: 8px 10px; font: inherit; text-align: center; border: 2px solid #94A3B8; border-radius: 10px; box-sizing: border-box; }
.cah-adv-msg { margin: 0; padding: 0 4px 8px 44px; font-size: 15px; color: #4B5563; }
.cah-adv-msg.is-low { color: #9A3412; font-weight: 600; }
.cah-adv-mine { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; min-height: 56px; padding: 10px 4px; }
.cah-adv-mine .cah-adv-body { flex: 1 1 160px; }
.cah-remove { flex: none; min-height: 44px; max-width: calc(100% - 40px); margin-left: 40px; box-sizing: border-box; }
.cah-addbox { margin-top: 14px; padding: 12px; border: 2px dashed #94A3B8; border-radius: 12px; }
.cah-addbox .cah-field { display: block; margin: 8px 0; }
.cah-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cah-add { min-height: 48px; }