/* ─────────────────────────────────────────────────────────────────────────────
   Presentech Donation Widgets — all four styles
   Each widget receives its accent colour via CSS custom properties:
     --ptech-pkg-accent        Primary button / highlight colour
     --ptech-pkg-accent-dark   Hover state
     --ptech-pkg-accent-light  Tint background
─────────────────────────────────────────────────────────────────────────────── */

/* ── Shared foundations ──────────────────────────────────────────────────── */

.ptech-widget {
    position:      relative;
    font-family:   inherit;
    box-sizing:    border-box;
    color:         var(--ptech-text, #1a1a1a);
}
.ptech-widget *,
.ptech-widget *::before,
.ptech-widget *::after { box-sizing: inherit; }

/* Accent-coloured button — reads from per-package CSS variable */
.ptech-btn--accent {
    background: var(--ptech-pkg-accent, #1a6b3c);
    color:      #fff !important;
    border:     none;
}
.ptech-btn--accent:hover {
    background: var(--ptech-pkg-accent-dark, #145530);
}
.ptech-btn--white {
    background: #fff;
    color:      var(--ptech-pkg-accent, #1a6b3c) !important;
    border:     none;
    font-weight: 600;
}
.ptech-btn--white:hover {
    background: rgba(255,255,255,.88);
}
.ptech-btn--ghost {
    background:  transparent;
    border:      1px solid rgba(255,255,255,.4);
    color:       rgba(255,255,255,.85);
}
.ptech-btn--full  { width: 100%; }
.ptech-btn--sm    { padding: .45rem .9rem; font-size: .875rem; }

/* Amount buttons — accent active state */
.ptech-amount-btn.is-active {
    background:   var(--ptech-pkg-accent, #1a6b3c) !important;
    border-color: var(--ptech-pkg-accent, #1a6b3c) !important;
    color:        #fff !important;
}
.ptech-amount-btn:hover {
    border-color: var(--ptech-pkg-accent, #1a6b3c) !important;
    color:        var(--ptech-pkg-accent-dark, #145530) !important;
    background:   var(--ptech-pkg-accent-light, #e8f5ee) !important;
}

/* Input focus ring uses accent colour */
.ptech-input:focus {
    border-color: var(--ptech-pkg-accent, #1a6b3c) !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--ptech-pkg-accent, #1a6b3c) 18%, transparent) !important;
}

/* Progress fill uses accent */
.ptech-progress__fill {
    background: var(--ptech-pkg-accent, #1a6b3c) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   STYLE 1: Card
   Image on top, title, description, form below.
───────────────────────────────────────────────────────────────────────────── */

.ptech-widget--card {
    background:    #fff;
    border:        1px solid #e2e2e2;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 2px 16px rgba(0,0,0,.07);
    display:       flex;
    flex-direction:column;
    transition:    box-shadow .2s;
}
.ptech-widget--card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.11);
}
.ptech-widget--card .ptech-widget__image img {
    width:      100%;
    height:     210px;
    object-fit: cover;
    display:    block;
}
.ptech-widget--card .ptech-widget__body {
    padding:        1.5rem;
    display:        flex;
    flex-direction: column;
    gap:            .9rem;
    flex:           1;
}
.ptech-widget--card .ptech-widget__title {
    margin:      0;
    font-size:   1.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.ptech-widget--card .ptech-widget__desc {
    margin:     0 0 0.5rem 0;
    font-size:  .9rem;
    color:      #555;
    line-height:1.6;
    height:     110px;          /* Fixed height for uniformity */
    overflow-y: auto;           /* Scrollable if content exceeds */
    padding-right: 8px;         /* Room for scrollbar */
}
.ptech-widget--card .ptech-widget__desc::-webkit-scrollbar {
    width: 4px;
}
.ptech-widget--card .ptech-widget__desc::-webkit-scrollbar-track {
    background: transparent;
}
.ptech-widget--card .ptech-widget__desc::-webkit-scrollbar-thumb {
    background: #e2e2e2;
    border-radius: 4px;
}
.ptech-widget--card .ptech-widget__desc::-webkit-scrollbar-thumb:hover {
    background: var(--ptech-pkg-accent, #1a6b3c);
}
/* card__form wraps step1 — flex so button sticks to bottom */
.ptech-widget--card .ptech-card__form {
    margin-top: auto;           /* pushes the whole form section down */
}
/* step1 itself stacks its children normally */
.ptech-widget--card .ptech-step1 {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}
/* Donate button always last in step1 — visually pinned to card bottom */
.ptech-widget--card .ptech-open-step2 {
    margin-top: .25rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   STYLE 2: Banner
   Full-width horizontal strip — image left, content right.
───────────────────────────────────────────────────────────────────────────── */

.ptech-widget--banner {
    display:       flex;
    align-items:   stretch;
    background:    #fff;
    border:        1px solid #e2e2e2;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 2px 16px rgba(0,0,0,.07);
    min-height:    160px;
}
.ptech-widget--banner__image {
    flex-shrink:0;
    width:       220px;
}
.ptech-widget--banner__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.ptech-widget--banner__content {
    padding:        1.25rem 1.5rem;
    display:        flex;
    flex-direction: column;
    justify-content:center;
    gap:            .75rem;
    flex:           1;
}
.ptech-widget--banner .ptech-widget__title {
    margin:     0;
    font-size:  1.15rem;
    font-weight:700;
}
.ptech-widget--banner .ptech-widget__desc--excerpt {
    margin:    0;
    font-size: .875rem;
    color:     #555;
}
/* Banner inline form */
.ptech-banner-form {
    display:        flex;
    flex-direction: column;
    gap:            .6rem;
}
.ptech-banner-form__row {
    display: flex;
    gap:     .5rem;
}
.ptech-banner-form__row .ptech-input {
    flex: 1;
}
.ptech-amounts--inline {
    flex-wrap: wrap;
    gap:       .35rem;
}
.ptech-amounts--inline .ptech-amount-btn {
    padding:   .35rem .75rem;
    font-size: .85rem;
}

@media (max-width: 640px) {
    .ptech-widget--banner { flex-direction: column; }
    .ptech-widget--banner__image { width: 100%; height: 160px; }
    .ptech-banner-form__row { flex-direction: column; }
}

/* ─────────────────────────────────────────────────────────────────────────
   STYLE 3: Minimal
   Compact single row — good for sidebar lists.
───────────────────────────────────────────────────────────────────────────── */

.ptech-widget--minimal {
    background:    #fff;
    border:        1px solid #e2e2e2;
    border-left:   4px solid var(--ptech-pkg-accent, #1a6b3c);
    border-radius: 0 8px 8px 0;
    padding:       .9rem 1rem;
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           .75rem;
    transition:    box-shadow .15s;
}
.ptech-widget--minimal:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.ptech-widget--minimal__left {
    flex:       1;
    min-width:  180px;
    display:    flex;
    flex-direction: column;
    gap:        .15rem;
}
.ptech-widget--minimal__title {
    font-weight: 600;
    font-size:   .95rem;
}
.ptech-widget--minimal__sub {
    font-size: .8rem;
    color:     #666;
}
.ptech-widget--minimal__right {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
}
.ptech-amounts--pills .ptech-amount-btn {
    padding:       .3rem .65rem;
    font-size:     .8rem;
    border-radius: 20px;
}

/* Expandable form */
.ptech-widget--minimal__expand {
    width:          100%;
    padding-top:    .75rem;
    border-top:     1px solid #eee;
    display:        flex;
    flex-direction: column;
    gap:            .6rem;
}
.ptech-widget--minimal__actions {
    display: flex;
    gap:     .5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   STYLE 4: Featured
   Large hero — image as background, text/form overlaid.
───────────────────────────────────────────────────────────────────────────── */

.ptech-widget--featured {
    position:      relative;
    border-radius: 16px;
    overflow:      hidden;
    min-height:    380px;
    display:       flex;
    align-items:   flex-end;
}
.ptech-widget--featured__bg {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    background-color:    #1a1a1a; /* fallback when no image */
    transition:          transform .4s;
}
.ptech-widget--featured:hover .ptech-widget--featured__bg {
    transform: scale(1.03);
}
.ptech-widget--featured__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,.1) 100%);
}
.ptech-widget--featured__content {
    position:       relative;
    z-index:        1;
    width:          100%;
    padding:        2rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}
.ptech-widget--featured__title {
    margin:      0;
    font-size:   1.6rem;
    font-weight: 800;
    color:       #fff;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ptech-widget--featured__desc {
    margin:     0;
    font-size:  .95rem;
    color:      rgba(255,255,255,.85);
    max-width:  520px;
}

/* Ghost amount buttons for featured/dark backgrounds */
.ptech-amounts--ghost {
    flex-wrap: wrap;
    gap:       .5rem;
}
.ptech-amounts--ghost .ptech-amount-btn {
    background:   rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.4);
    color:        #fff;
    backdrop-filter: blur(4px);
}
.ptech-amounts--ghost .ptech-amount-btn:hover {
    background:   rgba(255,255,255,.28) !important;
    border-color: #fff !important;
    color:        #fff !important;
}
.ptech-amounts--ghost .ptech-amount-btn.is-active {
    background:   #fff !important;
    border-color: #fff !important;
    color:        var(--ptech-pkg-accent, #1a6b3c) !important;
}

/* Ghost input for featured */
.ptech-input--ghost {
    background:   rgba(255,255,255,.15) !important;
    border-color: rgba(255,255,255,.4) !important;
    color:        #fff !important;
    backdrop-filter: blur(4px);
}
.ptech-input--ghost::placeholder { color: rgba(255,255,255,.65) !important; }
.ptech-input--ghost:focus {
    background:   rgba(255,255,255,.22) !important;
    border-color: #fff !important;
    box-shadow:   0 0 0 3px rgba(255,255,255,.2) !important;
}

/* Featured form rows */
.ptech-featured-form {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}
.ptech-featured-form__row {
    display: flex;
    gap:     .5rem;
}
.ptech-featured-form__row .ptech-input {
    flex: 1;
}

/* Light toggle (for featured dark bg) */
.ptech-toggle--light .ptech-toggle__label { color: rgba(255,255,255,.9); font-size: .875rem; }
.ptech-toggle--light .ptech-toggle__track { background: rgba(255,255,255,.3); }
.ptech-toggle--light input:checked + .ptech-toggle__track { background: #fff; }
.ptech-toggle--light .ptech-toggle__track::after { background: var(--ptech-pkg-accent, #1a6b3c); }
.ptech-toggle--light input:checked + .ptech-toggle__track::after { background: #fff; }

@media (max-width: 520px) {
    .ptech-featured-form__row { flex-direction: column; }
    .ptech-widget--featured__title { font-size: 1.3rem; }
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.ptech-badge {
    position:      absolute;
    top:           .75rem;
    right:         .75rem;
    background:    var(--ptech-pkg-accent, #1a6b3c);
    color:         #fff;
    font-size:     .75rem;
    font-weight:   700;
    padding:       .25rem .65rem;
    border-radius: 20px;
    letter-spacing:.03em;
    z-index:       2;
    text-transform:uppercase;
}
.ptech-badge--inline {
    position:   static;
    display:    inline-block;
    margin-bottom: .15rem;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */

.ptech-progress { margin-bottom: .5rem; }
.ptech-progress__bar {
    height:        8px;
    background:    #e5e5e5;
    border-radius: 4px;
    overflow:      hidden;
}
.ptech-progress--light .ptech-progress__bar { background: rgba(255,255,255,.25); }
.ptech-progress__fill {
    height:           100%;
    border-radius:    4px;
    transition:       width .5s ease;
}
.ptech-progress__labels {
    display:         flex;
    justify-content: space-between;
    font-size:       .8rem;
    color:           #666;
    margin-top:      .35rem;
}
.ptech-progress--light .ptech-progress__labels { color: rgba(255,255,255,.8); }
.ptech-progress__raised strong { color: var(--ptech-pkg-accent, #1a6b3c); }
.ptech-progress--light .ptech-progress__raised strong { color: #fff; }

/* ── Grid layout ─────────────────────────────────────────────────────────── */

.ptech-grid { display: grid; gap: 1.5rem; }
.ptech-grid--cols-1 { grid-template-columns: 1fr; }
.ptech-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ptech-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ptech-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Banner and minimal stacked vertically in grids */
.ptech-grid--style-banner,
.ptech-grid--style-minimal { grid-template-columns: 1fr !important; }

@media (max-width: 900px) {
    .ptech-grid--cols-3,
    .ptech-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ptech-grid { grid-template-columns: 1fr !important; }
}

/* ── List style ──────────────────────────────────────────────────────────── */
.ptech-widget--list {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            .75rem;
    background:     #fff;
    border:         1px solid #e2e2e2;
    border-radius:  10px;
    padding:        .85rem 1rem;
    transition:     box-shadow .15s;
}
.ptech-widget--list:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }

.ptech-widget--list__thumb {
    flex-shrink: 0;
    width:       64px;
    height:      64px;
    border-radius: 8px;
    overflow:    hidden;
}
.ptech-widget--list__thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}
.ptech-widget--list__info {
    flex:       1;
    min-width:  160px;
    display:    flex;
    flex-direction: column;
    gap:        .2rem;
}
.ptech-widget--list__top {
    display:    flex;
    align-items:center;
    gap:        .35rem;
    flex-wrap:  wrap;
}
.ptech-list-cat {
    font-size:     .72rem;
    font-weight:   600;
    background:    var(--ptech-pkg-accent-light, #e8f5ee);
    color:         var(--ptech-pkg-accent, #1a6b3c);
    padding:       .15rem .5rem;
    border-radius: 20px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.ptech-widget--list__title {
    font-size:   .95rem;
    font-weight: 600;
    color:       #1a1a1a;
    line-height: 1.3;
}
.ptech-widget--list__desc {
    font-size:  .8rem;
    color:      #777;
    margin:     0;
    line-height:1.4;
}
.ptech-widget--list__action {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    flex-wrap:   wrap;
    justify-content: flex-end;
}

/* Grid / list layout modes */
.ptech-grid--style-list  { grid-template-columns: 1fr !important; }
.ptech-grid--view-toggle { position: relative; }
.ptech-view-switcher {
    display:         flex;
    align-items:     center;
    gap:             .4rem;
    margin-bottom:   1rem;
    justify-content: flex-end;
}
.ptech-view-btn {
    padding:       .35rem .7rem;
    border:        1.5px solid #d5d5d5;
    border-radius: 6px;
    background:    #f8f8f8;
    font-size:     .8rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    all .12s;
    color:         #444;
}
.ptech-view-btn.is-active {
    border-color: var(--ptech-primary, #1a6b3c);
    background:   var(--ptech-primary, #1a6b3c);
    color:        #fff;
}