/* For Goodness Cakes VOLUNTEER-baker portal. Layered on top of interface-portal.css
   (which supplies the .portal-* grid/header/sidebar/main shell) and the per-team color
   tokens injected by /api/team-brand/48599.css. Mirrors the WebForms
   interfaces/fgc/portalVolunteer/_portal.master + _custom.css look so the migration is
   visually indistinguishable. Self-contained (does not depend on .customer-portal-layout). */

/* ===== Header (lighter pink than brand melon, matching the agency portal directive) ===== */
.fgc-volunteer-portal-layout .portal-header,
.fgc-volunteer-portal-layout .portal-logo-block {
    background: #EA9999;
}

/* Header user/info block: volunteer name, email, chapter, links (white text). */
.fgc-volunteer-portal-layout .portal-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}
.fgc-volunteer-portal-layout .portal-username {
    font-weight: 700;
    font-size: 1.05rem;
}
.fgc-volunteer-portal-layout .portal-chapter,
.fgc-volunteer-portal-layout .portal-weblink {
    font-size: 0.85rem;
    opacity: 0.95;
    margin-top: 0.15rem;
}
.fgc-volunteer-portal-layout .portal-chapter a,
.fgc-volunteer-portal-layout .portal-weblink a {
    color: #fff;
    text-decoration: underline;
}
.fgc-volunteer-portal-layout .portal-chapter a:hover,
.fgc-volunteer-portal-layout .portal-weblink a:hover {
    color: var(--color-tertiary, #9FCCBB);
}
.fgc-volunteer-portal-layout .portal-weblink i {
    color: #fff;
}

/* ===== Sidebar nav: neutral dark-gray text, FGC-melon icons (matches the agency directive) ===== */
.fgc-volunteer-portal-layout .portal-nav a,
.fgc-volunteer-portal-layout .portal-nav a:hover {
    color: #464646;
}
.fgc-volunteer-portal-layout .portal-nav a i {
    color: var(--color-primary, #EE7779);
}

/* Decorative "Birdy Bakes" image under the sidebar nav (from the WebForms aside). */
.fgc-volunteer-portal-layout .portal-birdy {
    margin-top: 2rem;
    text-align: center;
}
.fgc-volunteer-portal-layout .portal-birdy img {
    max-width: 100%;
    height: auto;
}

/* ===== Inactive / suspended / insurance lockout panel (mirrors WebForms pnlInactiveVolunteer) ===== */
.fgc-volunteer-portal-layout .portal-lockout {
    text-align: center;
    padding: 2rem 1rem;
}
.fgc-volunteer-portal-layout .portal-lockout h1 {
    color: var(--color-primary, #EE7779);
}
.fgc-volunteer-portal-layout .portal-lockout .font-120 {
    font-size: 1.2rem;
}
.fgc-volunteer-portal-layout .portal-lockout a {
    text-decoration: underline !important;
}

/* ===== Dashboard stat counters + cards (re-scoped from the agency portal helpers) ===== */
.fgc-volunteer-portal-layout .cp-stat {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-top: 4px solid var(--color-primary, #EE7779);
    border-radius: 0.5rem;
    box-shadow: var(--shadow, 0 2px 12px 0 rgba(40, 40, 40, .09));
    padding: 1.1rem 1rem;
    text-align: center;
    height: 100%;
}
.fgc-volunteer-portal-layout .cp-stat-num {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-secondary, #1A8584);
}
.fgc-volunteer-portal-layout .cp-stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #777;
    margin-top: 0.25rem;
}

.fgc-volunteer-portal-layout .cp-card {
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    box-shadow: var(--shadow, 0 2px 12px 0 rgba(40, 40, 40, .09));
    overflow: hidden;
    background: #fff;
    height: 100%;
}
.fgc-volunteer-portal-layout .cp-card-header {
    background: var(--color-tertiary, #9FCCBB);
    color: #27282A;
    font-weight: 700;
    padding: 0.75rem 1rem;
}
.fgc-volunteer-portal-layout .cp-card-body {
    padding: 1rem;
}

.fgc-volunteer-portal-layout .cp-bake-card {
    border: 1px solid #e2e2e2;
    border-left: 6px solid var(--color-primary, #EE7779);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
}
.fgc-volunteer-portal-layout .cp-mini-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-bottom: 0.1rem;
}
.fgc-volunteer-portal-layout .cp-status-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--color-tertiary, #9FCCBB);
    color: #27282A;
}

/* Label/value detail rows (bake detail page). */
.fgc-volunteer-portal-layout .cp-detail-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dotted #e2e2e2;
}
.fgc-volunteer-portal-layout .cp-detail-label {
    min-width: 170px;
    font-weight: 700;
    color: var(--color-primary, #EE7779);
}

/* ===== Birdie's Bakes photo gallery grid ===== */
.fgc-volunteer-portal-layout .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.fgc-volunteer-portal-layout .gallery-item {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow, 0 2px 12px 0 rgba(40, 40, 40, .09));
    background: #fff;
}
.fgc-volunteer-portal-layout .gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.fgc-volunteer-portal-layout .gallery-caption {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #464646;
}

/* ===== Shared color + utility helpers (match FGC _custom.css / _base.css) ===== */
.fgc-volunteer-portal-layout .melon { color: #EE7779 }
/* Per Christine 2026-06-06: portal text must never be the Argenta green #00CC78.
   The shared .green utility is #00CC78 !important; override it to neutral gray #464646
   (scoped to the portal). The FGC teal lives on .secondary / --color-secondary (#1A8584). */
.fgc-volunteer-portal-layout .green { color: #464646 !important }
.fgc-volunteer-portal-layout .secondary { color: #1A8584 }
.fgc-volunteer-portal-layout .tertiary { color: #9FCCBB }
.fgc-volunteer-portal-layout .mint { color: #9FCCBB }
.fgc-volunteer-portal-layout .pink { color: #F5D6D5 }
.fgc-volunteer-portal-layout .gray { color: #747577 }
.fgc-volunteer-portal-layout .red { color: #CC3333 }
.fgc-volunteer-portal-layout .font-90 { font-size: 90% }
.fgc-volunteer-portal-layout .font-120 { font-size: 120% }
.fgc-volunteer-portal-layout .form-text,
.fgc-volunteer-portal-layout .grid-label { color: #27282A; font-weight: 600 }
.fgc-volunteer-portal-layout .grid-title { color: #1A8584; font-weight: 700; margin-right: .35rem }
.fgc-volunteer-portal-layout .subtext { font-size: .8rem; color: #888 }
.fgc-volunteer-portal-layout .btn-special {
    background: #9FCCBB; color: #27282A; border: 0; font-family: muli, sans-serif; font-weight: 700;
}
.fgc-volunteer-portal-layout .btn-special:hover { background: #8bbfaa; color: #27282A }
.fgc-volunteer-portal-layout .spinner-border.melon { color: #EE7779 }
.fgc-volunteer-portal-layout .spinner-border.green { color: #1A8584 }

/* ===== Dashboard metric boxes (match WebForms _custom.css) ===== */
.fgc-volunteer-portal-layout .metric-box {
    border: 1px solid #CCC; margin: .20%; padding: 1.25rem; min-height: 180px; color: #27282A; height: 100%;
}
.fgc-volunteer-portal-layout .metric-title {
    width: 50%; margin-bottom: .25em; border-bottom: 2px solid #1A8584; font: bold 1.2em gotham, sans-serif;
}

/* ===== Bake detail / sign-up gradient-card design (ported from the inline WebForms styles) ===== */
.fgc-volunteer-portal-layout .back-btn i { transition: transform .2s }
.fgc-volunteer-portal-layout .back-btn:hover i { transform: translateX(-3px) }

.fgc-volunteer-portal-layout .bake-header {
    background: linear-gradient(135deg, #F5D6D5 0%, #fff 100%);
    border-radius: 1.5rem; padding: 2rem; margin-bottom: 2rem;
}
.fgc-volunteer-portal-layout .bake-title { font-family: calder-dark, sans-serif; font-size: 2rem; color: #27282A }
.fgc-volunteer-portal-layout .bake-status {
    display: inline-block; font-family: sofia-pro-soft, sans-serif; font-weight: 600; font-size: .9rem;
    padding: .5rem 1.25rem; border-radius: 2rem;
}
.fgc-volunteer-portal-layout .bake-status.open { background: #9FCCBB; color: #27282A }
.fgc-volunteer-portal-layout .bake-status.closed { background: #DEE2E6; color: #666 }
.fgc-volunteer-portal-layout .delivery-highlight {
    background: linear-gradient(135deg, #1A8584 0%, #2ba3a2 100%); color: #fff; text-align: center;
    padding: 1.5rem; border-radius: 1.25rem;
}
.fgc-volunteer-portal-layout .delivery-highlight .date { font-family: calder-dark, sans-serif; font-size: 1.75rem }
.fgc-volunteer-portal-layout .delivery-highlight .time { font-family: gotham, sans-serif; font-size: 1rem; opacity: .9 }

.fgc-volunteer-portal-layout .info-card {
    background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.06); border: 1px solid #f0f0f0;
    border-radius: 1.25rem; padding: 1.75rem; margin-bottom: 1.5rem;
}
.fgc-volunteer-portal-layout .info-card-header {
    display: flex; align-items: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid #F5D6D5;
}
.fgc-volunteer-portal-layout .info-card-header i { font-size: 1.5rem; color: #EE7779; margin-right: .75rem }
.fgc-volunteer-portal-layout .info-card-header h4 {
    margin: 0; font-family: sofia-pro-soft, sans-serif; font-size: 1.1rem; font-weight: 600;
    color: #27282A; text-transform: uppercase; letter-spacing: .5px;
}
.fgc-volunteer-portal-layout .detail-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1rem }
.fgc-volunteer-portal-layout .detail-item { flex: 1; min-width: 200px }
.fgc-volunteer-portal-layout .detail-label {
    font-family: gotham, sans-serif; font-size: .75rem; font-weight: 600; color: #1A8584;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem;
}
.fgc-volunteer-portal-layout .detail-value { font-family: gotham, sans-serif; font-size: 1rem; color: #27282A; line-height: 1.4 }
.fgc-volunteer-portal-layout .detail-value.large { font-size: 1.1rem; font-weight: 500 }

.fgc-volunteer-portal-layout .bake-details-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.75rem;
}
/* The recipient is the heart of the bake — give it a full-width hero row across the screen. */
.fgc-volunteer-portal-layout .bake-detail-card.recipient { grid-column: 1 / -1 }
.fgc-volunteer-portal-layout .bake-detail-card {
    background: linear-gradient(135deg, #fafafa 0%, #fff 100%); border: 1px solid #f0f0f0;
    border-radius: 1rem; padding: 1.5rem;
}
.fgc-volunteer-portal-layout .bake-detail-card.recipient {
    background: linear-gradient(135deg, #F5D6D5 0%, #fff 100%); border: 2px solid #F5D6D5;
}
.fgc-volunteer-portal-layout .bake-detail-card-title {
    font-family: sofia-pro-soft, sans-serif; font-size: .85rem; font-weight: 700; color: #1A8584;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;
}
.fgc-volunteer-portal-layout .bake-detail-card-title i { margin-right: .5rem }
.fgc-volunteer-portal-layout .recipient-name { font-family: calder-dark, sans-serif; font-size: 1.75rem; color: #27282A; margin-bottom: .75rem }
.fgc-volunteer-portal-layout .recipient-meta { display: flex; gap: 1.5rem; flex-wrap: wrap }
.fgc-volunteer-portal-layout .recipient-meta-item i { color: #EE7779; font-size: .9rem; margin-right: .35rem }
.fgc-volunteer-portal-layout .recipient-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem }
.fgc-volunteer-portal-layout .recipient-hero .recipient-name { margin-bottom: 0 }
.fgc-volunteer-portal-layout .bake-detail-card.recipient .recipient-meta-item { background: #fff; border-radius: 2rem; padding: .4rem 1.1rem; font-family: gotham, sans-serif; font-weight: 600; color: #27282A }

/* Delightful profile-photo avatar uploader (settings page) */
.fgc-volunteer-portal-layout .fgc-avatar-upload { display: inline-flex; flex-direction: column; align-items: center; gap: .85rem }
.fgc-volunteer-portal-layout .fgc-avatar-drop { position: relative; display: block; width: 150px; height: 150px; border-radius: 50%; cursor: pointer; border: 4px solid #fff; outline: 2px solid #F5D6D5; box-shadow: 0 6px 20px rgba(0,0,0,.12); transition: outline-color .2s, outline-width .2s, transform .2s, box-shadow .2s }
.fgc-volunteer-portal-layout .fgc-avatar-drop:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.18) }
.fgc-volunteer-portal-layout .fgc-avatar-drop--active { outline-color: #EE7779; outline-width: 3px }
.fgc-volunteer-portal-layout .fgc-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #F5D6D5 }
.fgc-volunteer-portal-layout .fgc-avatar-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border-radius: 50% }
.fgc-volunteer-portal-layout .fgc-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(39,40,42,.48); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; opacity: 0; transition: opacity .2s; pointer-events: none; font-family: gotham, sans-serif; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px }
.fgc-volunteer-portal-layout .fgc-avatar-overlay i { font-size: 1.6rem }
.fgc-volunteer-portal-layout .fgc-avatar-drop:hover .fgc-avatar-overlay, .fgc-volunteer-portal-layout .fgc-avatar-drop--active .fgc-avatar-overlay { opacity: 1 }
.fgc-volunteer-portal-layout .fgc-avatar-badge { position: absolute; bottom: 4px; right: 4px; width: 40px; height: 40px; border-radius: 50%; background: #EE7779; color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.22); pointer-events: none }
.fgc-volunteer-portal-layout .fgc-avatar-badge i { font-size: .95rem }
.fgc-volunteer-portal-layout .fgc-avatar-remove { background: none; border: none; color: #1A8584; font-family: gotham, sans-serif; font-size: .85rem; cursor: pointer; padding: .15rem .5rem; border-radius: .5rem; transition: color .15s }
.fgc-volunteer-portal-layout .fgc-avatar-remove:hover { color: #EE7779; text-decoration: underline }
.fgc-volunteer-portal-layout .bake-field { margin-bottom: .75rem }
.fgc-volunteer-portal-layout .bake-field-label { font-size: .7rem; text-transform: uppercase; color: #888; letter-spacing: .5px }
.fgc-volunteer-portal-layout .bake-field-value { font-size: 1.05rem; color: #27282A }
.fgc-volunteer-portal-layout .bake-field-value.highlight { font-size: 1.2rem; font-weight: 600; color: #1A8584 }
.fgc-volunteer-portal-layout .special-note {
    background: linear-gradient(135deg, #EE7779 0%, #f5a5a7 100%); color: #fff; padding: 1.25rem 1.5rem;
    border-radius: 1rem; margin-top: 1rem;
}
.fgc-volunteer-portal-layout .special-note i { margin-right: .5rem }
.fgc-volunteer-portal-layout .photo-section { background: #FAFAFA; text-align: center; padding: 1.5rem; margin-bottom: 1rem; border-radius: 1rem }

/* Sign-up section */
.fgc-volunteer-portal-layout .signup-section {
    background: linear-gradient(135deg, #9FCCBB 0%, #e9f4ef 100%); border-radius: 1.5rem; padding: 2rem; margin-top: 1.5rem;
}
.fgc-volunteer-portal-layout .signup-title { font-family: calder-dark, sans-serif; font-size: 1.5rem; text-align: center }
.fgc-volunteer-portal-layout .signup-title i { margin-right: .5rem }
.fgc-volunteer-portal-layout .signup-intro { text-align: center; font-family: gotham, sans-serif; opacity: .9; margin-bottom: 1.25rem }
.fgc-volunteer-portal-layout .acknowledgement-card { background: #fff; border-radius: 1rem; padding: 1.5rem }
.fgc-volunteer-portal-layout .acknowledgement-item { display: flex; align-items: flex-start; margin-bottom: 1rem }
.fgc-volunteer-portal-layout .acknowledgement-item input[type=checkbox] {
    width: 1.25rem; height: 1.25rem; accent-color: #1A8584; flex-shrink: 0; margin-top: .1rem; margin-right: .6rem; cursor: pointer;
}
.fgc-volunteer-portal-layout .acknowledgement-item label { font-family: gotham, sans-serif; font-size: .9rem; color: #464646; line-height: 1.5 }
.fgc-volunteer-portal-layout .location-warning {
    background: #fff; border: 2px solid #1A8584; border-radius: 1rem; padding: 1rem 1.25rem; margin-top: 1.25rem;
    display: flex; align-items: center;
}
.fgc-volunteer-portal-layout .location-warning i { color: #1A8584; font-size: 1.25rem; margin-right: .6rem }
.fgc-volunteer-portal-layout .button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.5rem }
.fgc-volunteer-portal-layout .btn-signup {
    background: linear-gradient(135deg, #EE7779 0%, #f5a5a7 100%); color: #fff; font-family: sofia-pro-soft, sans-serif;
    font-weight: 700; font-size: 1.1rem; padding: 1rem 2.5rem; border: 0; border-radius: 2rem; transition: all .15s ease;
}
.fgc-volunteer-portal-layout .btn-signup:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(238,119,121,.4); color: #fff }
.fgc-volunteer-portal-layout .btn-cancel {
    background: #fff; border: 2px solid #DEE2E6; color: #666; font-family: sofia-pro-soft, sans-serif;
    font-weight: 600; padding: 1rem 2rem; border-radius: 2rem;
}
.fgc-volunteer-portal-layout .btn-cancel:hover { border-color: #EE7779; color: #EE7779 }
.fgc-volunteer-portal-layout .submit-note { font-family: gotham, sans-serif; font-size: .85rem; color: #888; text-align: center; margin-top: .75rem }

/* Error + thank-you panels */
.fgc-volunteer-portal-layout .error-panel, .fgc-volunteer-portal-layout .thankyou-panel { text-align: center; padding: 3rem 2rem }
.fgc-volunteer-portal-layout .error-title { font-family: calder-dark, sans-serif; font-size: 2rem; color: #27282A }
.fgc-volunteer-portal-layout .thankyou-title { font-family: calder-dark, sans-serif; font-size: 2.5rem; color: #27282A }
.fgc-volunteer-portal-layout .thankyou-message { font-family: gotham, sans-serif; font-size: 1.1rem; color: #666 }
.fgc-volunteer-portal-layout .thankyou-submessage { font-family: sofia-pro-soft, sans-serif; font-size: 1rem; color: #1A8584 }

@media (max-width: 768px) {
    .fgc-volunteer-portal-layout .bake-header { padding: 1.5rem }
    .fgc-volunteer-portal-layout .bake-title { font-size: 1.5rem }
    .fgc-volunteer-portal-layout .info-card { padding: 1.25rem }
    .fgc-volunteer-portal-layout .detail-item { min-width: 100% }
    .fgc-volunteer-portal-layout .signup-section { padding: 1.5rem }
    .fgc-volunteer-portal-layout .button-row { flex-direction: column }
    .fgc-volunteer-portal-layout .button-row .btn { width: 100% }
}

/* ===== Chat with Birdie ===== */
.fgc-volunteer-portal-layout .birdie-chat-log {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    padding: 1rem;
    max-height: 460px;
    overflow-y: auto;
}
.fgc-volunteer-portal-layout .birdie-msg {
    display: flex;
    margin-bottom: 0.75rem;
}
.fgc-volunteer-portal-layout .birdie-msg.me {
    justify-content: flex-end;
}
.fgc-volunteer-portal-layout .birdie-bubble {
    max-width: 80%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    background: #F5D6D5;
    color: #27282A;
}
.fgc-volunteer-portal-layout .birdie-msg.me .birdie-bubble {
    background: var(--color-tertiary, #9FCCBB);
}