/* ==========================================================================
   CAMPAIGN: campaign page, banner slider, item cards, gift panel
   ========================================================================== */

/* ---- Progress bars ---- */
.progress--sm { height: 6px; margin: .35rem 0 .5rem; }

/* ---- Header card ---- */
.campaign { padding-bottom: 2rem; }
.camp-head { margin: 1rem 0 1.25rem; padding: clamp(1rem, 3vw, 1.6rem); }
.camp-head h1 { margin-bottom: .25em; font-size: clamp(1.5rem, 4.5vw, 2.2rem); }
.camp-sub { margin: 0 0 1rem; color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.1rem); }
.camp-stats { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .6rem; }
.camp-raised { margin: 0; }
.camp-raised strong { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--green-text); }
.camp-raised span { color: var(--muted); font-weight: 600; }
.camp-raised small { color: var(--muted); font-size: .9rem; }
.camp-donors { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--ink); font-weight: 600; }
.camp-donors .i { color: var(--green-btn); }
.camp-goal, .camp-by { display: flex; align-items: center; gap: .4rem; margin: .65rem 0 0; color: var(--muted); font-size: .95rem; }
.camp-by { margin-top: .4rem; }
.camp-by strong { color: var(--blue-700); }

/* ---- Layout: phone = slider, gift panel, then content; desktop = content left, sticky panel right ---- */
.camp-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "slider" "aside" "rest"; }
.camp-slider { grid-area: slider; min-width: 0; }
.camp-aside { grid-area: aside; min-width: 0; }
.camp-rest { grid-area: rest; min-width: 0; }
@media (min-width: 960px) {
    .camp-layout { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "slider aside" "rest aside"; column-gap: 2rem; align-items: start; }
    .camp-aside { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
}

/* ---- Banner slider ---- */
.slider { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--blue-900); box-shadow: var(--shadow-sm); }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline: 3px solid var(--blue-700); outline-offset: -3px; }
.slider__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.slider__slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.slider__ribbon { position: absolute; top: 14px; right: 0; padding: .35rem .9rem .35rem 1rem; border-radius: 99px 0 0 99px; background: var(--green-btn); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.slider__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--blue); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.slider__nav:hover { background: #fff; }
.slider__nav--prev { left: 10px; }
.slider__nav--prev .i { transform: rotate(180deg); }
.slider__nav--next { right: 10px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.slider__dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; pointer-events: auto; }
.slider__dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); transition: transform .2s, background .2s; }
.slider__dots button[aria-current="true"]::before { background: #fff; transform: scale(1.35); }
.slider--empty { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--green-100), var(--blue-100)); color: var(--blue); }
@media (max-width: 599px) { .slider__nav { width: 38px; height: 38px; margin-top: -19px; } }

/* ---- Gift panel ---- */
.giftbox { padding: 1.2rem; border-top: 5px solid var(--green); box-shadow: var(--shadow); }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.badge-pill { padding: .3rem .8rem; border-radius: 8px; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.badge-pill--green { background: var(--green-btn); }
.badge-pill--blue { background: var(--blue); }
.giftbox .share { margin: 0 0 1.1rem; }
.chips--3 { grid-template-columns: repeat(3, 1fr); }
.chip--popular span { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chip--popular { display: flex; flex-direction: column; }
.chip--popular span { flex: 1; }
.chip--popular em { display: block; padding: .15rem .25rem; border-radius: 0 0 12px 12px; background: var(--blue); color: #fff; font-size: .68rem; font-style: normal; font-weight: 700; text-align: center; }
.gift-or { display: flex; align-items: center; gap: .75rem; margin: .25rem 0 .6rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.gift-or::before, .gift-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gift-lines { margin: 0 0 .75rem; padding: .75rem .9rem; border-radius: var(--radius-sm); background: var(--green-50); }
.gift-lines ul li { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; font-size: .92rem; }
.gift-hint { margin: .25rem 0 0; font-size: .9rem; color: var(--muted); }
.gift-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .75rem; padding: .7rem 0; border-block: 1px dashed var(--line); font-weight: 600; }
.gift-total strong { font-size: 1.6rem; color: var(--green-text); }
.gift-monthly { margin: .9rem 0 0; font-size: .92rem; text-align: center; color: var(--muted); }
[data-gift-submit].is-idle { background: #7e9a6c; box-shadow: none; }

/* ---- Phone bar: total + Donate ---- */
.gift-bar { position: fixed; z-index: 96; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(1, 42, 88, .1); }
.gift-bar__sum { display: flex; flex-direction: column; margin: 0; line-height: 1.15; }
.gift-bar__sum small { color: var(--muted); font-size: .75rem; }
.gift-bar__sum strong { font-size: 1.35rem; color: var(--blue); }
.gift-bar .btn { flex: 1; max-width: 260px; }
body.has-gift-bar .bar { display: none; }
body.has-gift-bar { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
body.has-gift-bar .wa-float { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) {
    .gift-bar { display: none; }
    body.has-gift-bar { padding-bottom: 0; }
    body.has-gift-bar .wa-float { bottom: 24px; }
}

/* ---- Tabs ---- */
.camp-tabs { position: sticky; top: var(--header-h); z-index: 30; margin: 0 0 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; scrollbar-width: none; }
.camp-tabs::-webkit-scrollbar { display: none; }
.camp-tabs ul { display: flex; }
.camp-tabs li { flex: 1 0 auto; }
.camp-tabs a { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: 0 1.25rem; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.camp-tabs a:hover { color: var(--blue); }
.camp-tabs a[aria-current="true"] { color: var(--green-text); border-bottom-color: var(--green-btn); }
.count--soft { display: inline-block; min-width: 22px; padding: 0 .4rem; border-radius: 99px; background: var(--blue-50); color: var(--blue); font-size: .72rem; line-height: 22px; text-align: center; }

/* ---- Sections ---- */
.camp-sec { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--header-h) + 70px); }
.camp-sec h2 { margin-bottom: .35em; padding-left: .75rem; border-left: 4px solid var(--green); font-size: 1.4rem; }
.camp-sec > .muted { margin-bottom: 1rem; }

/* ---- Item cards ---- */
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 600px) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.item { display: flex; flex-direction: column; padding: .7rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.item.is-chosen { border-color: var(--green-btn); box-shadow: 0 0 0 2px rgba(63, 132, 25, .25); }
.item__media { aspect-ratio: 1 / 1; margin-bottom: .6rem; border-radius: var(--radius-sm); background: var(--soft); overflow: hidden; }
.item__media img { width: 100%; height: 100%; object-fit: contain; }
.item__ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--green-100), var(--blue-100)); color: var(--blue); }
.item__name { margin: 0 0 .15rem; font-size: 1.02rem; }
.item__qty { margin: 0; color: var(--muted); font-size: .8rem; }
.item__price { margin: .4rem 0 .65rem; color: var(--muted); font-size: .88rem; }
.item__price strong { font-size: 1.1rem; color: var(--green-text); }
.item__add { display: none; margin-top: auto; min-height: 44px; border: 2px solid var(--green-100); border-radius: 10px; background: var(--green-50); color: var(--green-text); font-weight: 800; letter-spacing: .03em; }
.item__add:hover { border-color: var(--green-btn); }
.js .item__add { display: block; }
.js .item.is-chosen .item__add { display: none; }
.item__step { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .35rem; margin-top: auto; }
.js .item:not(.is-chosen) .item__step { display: none; }
.item__step button { min-height: 44px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--blue); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.item__step button:hover { border-color: var(--blue-700); }
.item__step input { width: 100%; min-height: 44px; text-align: center; font-size: 1.05rem; font-weight: 800; border: 2px solid var(--green-btn); border-radius: 10px; -moz-appearance: textfield; }
.item__step input::-webkit-outer-spin-button, .item__step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item.is-funded { opacity: .85; }
.item__done { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: auto 0 0; min-height: 44px; border-radius: 10px; background: var(--green-100); color: var(--green-text); font-weight: 800; }

/* ---- Video (loads only on click) ---- */
.video { position: relative; margin-bottom: 1.25rem; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: linear-gradient(135deg, var(--blue-900), var(--blue)); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; width: 100%; height: 100%; border: 0; background: transparent; color: #fff; }
.video__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--green-btn); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .15s; }
.video__play:hover .video__icon { transform: scale(1.08); }
.video__text { font-size: 1.1rem; font-weight: 800; }
.video__play small { color: #bcd2ee; }

/* ---- Updates ---- */
.updates { display: grid; gap: 1.5rem; }
.update { position: relative; padding: 0 0 0 1.25rem; border-left: 3px solid var(--green-100); }
.update::before { content: ""; position: absolute; left: -8px; top: .3rem; width: 13px; height: 13px; border-radius: 50%; background: var(--green-btn); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--green-100); }
.update__date { margin: 0 0 .1rem; color: var(--muted); font-size: .85rem; }
.update h3 { margin-bottom: .5rem; }
.update__img { width: 100%; height: auto; margin: .25rem 0 .75rem; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; object-fit: cover; }

/* ---- Campaign cards (lists) ---- */
.ccard__raised { margin: 0 0 .75rem; color: var(--muted); font-size: .85rem; }
.ccard__raised strong { color: var(--ink); }
.ccard__price small { display: block; font-size: .75rem; }
.ccard__sum { margin-bottom: .75rem; }

/* ---- Donate page extras ---- */
.dpick { margin-bottom: 1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.dpick__row { display: flex; gap: .6rem; }
.dpick__row .input { flex: 1; }
.dcause { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .6rem .85rem; border-radius: var(--radius-sm); background: var(--green-50); font-weight: 600; }
.dcause .i { color: var(--green-btn); }
.dcard__sub { margin: 1.25rem 0 .75rem; font-size: 1.05rem; }
.donate .items { margin-bottom: .5rem; }