@charset "utf-8";
/* Title: Nice Industries Party Time
** Description: We're doing Nice things and inviting friends to join us
** Author: Jessica Greenwalt
** Created: 07-22-2025
** Updated: 05-15-2026
************************************** */

/* = Global
** ----------------------- */

body {
	overflow-x: clip;
	margin: 0;
	padding: 0;
	font-family: "Figtree", Helvetica, Arial, sans-serif;
}

section {
	clear: both;
}

.fr {
	float: right;
}

.fw {
    width: 100%;
}

.o0,
.o100 {
    transition: opacity 0.5s ease;
}

.o0 {
    opacity: 0;
}

.o100 {
    opacity: 1;
}

.load	{
	display: none;
}

.hide,
.mhide {
    display: none;
}

.block {
    display: block;
}

/* Standard Padding */
.stndpad {
    margin: 0 auto;
    margin-top: 60px;
    width: 100%;
    padding: 0 10px;
}

/* Left Right Padding */
.lrpad {
    padding: 0 10px;
}


/* Make a container 2 columns */
.col2 {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

@media (min-width: 700px) {
    .d-col2 {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    /* Pop Out Box Container */
    .d-col2.po-box-contain {
        gap: 14px;
    }
}

.mxw-450 {
    margin: 0 auto;
    max-width: 450px;
}

.mxw-500 {
    margin: 0 auto;
    max-width: 500px;
}

.mxw-600 {
    margin: 0 auto;
    max-width: 600px;
}

.mxw-800 {
    margin: 0 auto;
    max-width: 800px;
}

.mxw-1000 {
    margin: 0 auto;
    max-width: 1000px;
}

.mxw-1200 {
    margin: 0 auto;
    max-width: 1200px;
}

.contain {
    position: relative;
	margin: 0 auto;
    /* max-width: 1200px; */
    /* DO NOT add z-index here. Combined with position:relative, it creates
       a stacking context that traps child modals (z-index:9999) below the
       footer (z-index:999), preventing modal interaction. */
}

.contain-scroll {
	position: absolute;
	z-index: 9999;
	width: 100%;
	height: 100%;
	overflow-x: scroll;
}

.bgcvr {
    position: fixed;
    z-index: -1;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bgcvr video {
    min-width: 100%;
    min-height: 100%;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.row {
  display: flex;
  width: 100%;
  gap: 6px;
}

.top-angle,
.btn-a-top-angle,
.btm-angle,
.btn-a-btm-angle {
    position: absolute;
    z-index: 100;
}

/* Overlays */
.ovrlshd {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 18px;
    background: rgba(0, 0, 0, 0.5);
}

.ovrlshd.bg {
    z-index: 200;
    text-indent: -9999px;
}

.ovrlgrd {
    position: absolute;
    display: block;
    min-width: 100%;
    min-height: 100%;
    width: fit-content;
    color: #fff;
    text-align: left;
    /*
    padding: 24px;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.9) 100%);
    */
}

.ovrlgrd {
    display: flex;
    flex-direction: column;
}

.grd1,
.grd2 {
    width: 100%;
}


.grd1 {
    height: 400px;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0.9) 100%);
}

.grd2 {
    padding: 24px;
    background: rgba(0, 0, 0, 0.9);
}

/* Hide Text */
.btn span,
.shine,
.mouth,
.arrow,
.top-angle,
.btn-a-angle,
.btm-angle,
.color-stripes .stripe,
.post,
.line-diagonal,
.icon {
	text-indent: -9999px;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fade-out {
  animation: fadeOut 0s linear forwards;
}







/* = Containers
** ----------------------- */

/* Footer */
footer {
	clear: both;
	position: relative;
	z-index: 999;
	padding-top: 100px;
	padding-bottom: 80px;
    pointer-events: none;
}

footer .copyright {
	display: block;
	margin-top: 1em;
	font-size: 80%;
    pointer-events: auto;
}

footer .flinks {
    margin-top: 15px;
    pointer-events: auto;
}

footer .flinks a {
    text-decoration: none;
    color: #000;
}

footer .flinks a:hover {
    font-weight: 600;
}

footer .social-bar {
    pointer-events: auto;
}

    

/* Popups */
.ovrlshd .popup {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    background: #fff;
    padding: 20px;
    border: 6px solid #000;
    
}

.ovrlshd .popup h2,
.ovrlshd .popup p {
  text-align: center;
}

.ovrlshd .popup h2 {
    margin-bottom: 10px;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
}

.ovrlshd .popup p {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 12px;
    color: #111;
}

.ovrlshd .popup .btn-a {
    margin: 20px 0 20px -5px;
}

/* Box */
.box {
    position: relative;
    background: #000;
}

.box .top-angle {
    top: -27px;
    width: 20px;
    height: 32px;
    background: url(../img/angle-top-bl-lg.png?v=88a55475285d) center no-repeat;
    background-size: cover;
}

.box .btm-angle {
    right: -20px;
    bottom: -4px;
    width: 20px;
    height: 27px;
    background: url(../img/angle-btm-bl-lg.png?v=42231552dcf4) center no-repeat;
    background-size: cover;
}

.box .box-inside {
    position: relative;
    top: -20px;
    right: -20px;
    text-align: left;
    background: #fff;
    border: 5px solid #000;
}

/* = Colors
** ----------------------- */

.green-bg {
    background: #5DF900;
}

.orange-bg {
    background: #FFA406;
}

.pink-bg {
    background: #FF34B9;
}

.blue-bg {
    background: #41FFFF;
}

.yellow-bg {
    background: #F9F932;
}


/* = Typography
** ----------------------- */

.txtnote {
    text-align: left;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 18px;
    opacity: 0.8;
}

h2.htop {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}



h3.hboxcntr {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

/* = Buttons
** ----------------------- */
.btn-sq,
.btn-rec,
.btn-stnd {
    display: inline-block;
    overflow: hidden;
}

.btn-sq {
    margin-left: 4px;
    width: 56px;
    height: 57px;
    text-align: right;
    background: url(../img/btn-sm-sq.png?v=d89514d1405f) center no-repeat;
    background-size: contain;
}

.btn-sq:hover {
    background: url(../img/btn-sm-sq-h.png?v=7bd2e6d752c9) center no-repeat;
    background-size: contain;
}

.btn-sq:active {
    background: url(../img/btn-sm-sq-a.png?v=0fa108170482) center no-repeat;
    background-size: contain;
}

.btn-rec {
    margin-left: 4px;
    width: 128px;
    height: 57px;
    text-align: right;
    background: url(../img/btn-sm-rec1.png?v=308f875b3629) center no-repeat;
    background-size: contain;
}

.btn-rec:hover {
    background: url(../img/btn-sm-rec1-h.png?v=b83e8348b979) center no-repeat;
    background-size: contain;
}

.btn-rec:active {
    background: url(../img/btn-sm-rec1-a.png?v=edbab9d9853e) center no-repeat;
    background-size: contain;
}

.btn-stnd {
    width: 308px;
    height: 68px;
    text-align: right;
    background: url(../img/btn-stnd.png?v=e488f9ff8b9e) center no-repeat;
    background-size: contain;
}

.btn-stnd:hover {
    background: url(../img/btn-stnd-h.png?v=d013bcfa36bb) center no-repeat;
    background-size: contain;
}

.btn-stnd:active {
    background: url(../img/btn-stnd-a.png?v=c08c5da43ade) center no-repeat;
    background-size: contain;
}

.btn-sq span,
.btn-rec span,
.btn-stnd span {
    display: inline-block;
    overflow: hidden;
}

.btn-sq.ig span {
    margin: 10px 10px 0 0;
    width: 26px;
    height: 26px;
    background: url(../img/ic-ig-w.svg?v=d0e0634c4abe) center no-repeat;
    background-size: contain;
}

.btn-sq:hover.ig span {
    margin: 14px 13px 0 0;
    background: url(../img/ic-ig-b.svg?v=73b581b813aa) center no-repeat;
    background-size: contain;
}

.btn-sq:active.ig span {
    margin: 20px 18px 0 0;
}

.btn-sq.fb span {
    margin: 12px 18px 0 0;
    width: 12px;
    height: 22px;
    background: url(../img/ic-f-w.svg?v=e6048a8e7ac7) center no-repeat;
    background-size: contain;
}

.btn-sq:hover.fb span {
    margin: 15px 21px 0 0;
    background: url(../img/ic-f-b.svg?v=0cee6b7c3980) center no-repeat;
    background-size: contain;
}

.btn-sq:active.fb span {
    margin: 21px 26px 0 0;
}

.btn-sq.li span {
    margin: 10px 12px 0 0;
    width: 22px;
    height: 22px;
    background: url(../img/ic-li-w.svg?v=7fd540fd5cc9) center no-repeat;
    background-size: contain;
}

.btn-sq:hover.li span {
    margin: 14px 15px 0 0;
    background: url(../img/ic-li-b.svg?v=37fe3fd7233f) center no-repeat;
    background-size: contain;
}

.btn-sq:active.li span {
    margin: 20px 20px 0 0;
}

.btn-rec.newsletter span {
    margin: 10px 12px 0 0;
    width: 94px;
    height: 26px;
    background: url(../img/text-newsletter-w.svg?v=8c68968239c7) center no-repeat;
    background-size: contain;
}

.btn-rec:hover.newsletter span {
    margin: 14px 15px 0 0;
    background: url(../img/text-newsletter-b.svg?v=04d512530d84) center no-repeat;
    background-size: contain;
}

.btn-rec:active.newsletter span {
    margin: 20px 20px 0 0;
}

.btn-stnd.newsletter span {
    margin: 15px 36px 0 0;
    width: 215px;
    height: 26px;
    background: url(../img/text-sign-up-for-newsletter-w.svg?v=995a6ca67469) center no-repeat;
    background-size: contain;
}

.btn-stnd:hover.newsletter span {
    margin: 18px 45px 0 0;
    background: url(../img/text-sign-up-for-newsletter-b.svg?v=2828b4b24f1f) center no-repeat;
    background-size: contain;
}

.btn-stnd:active.newsletter span {
    margin: 25px 50px 0 0;
}

/* Less Dramatic Buttons */
.btn-basic {
    display: block;
    margin: 0 auto;
    color: #000;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

/* Create Event Form Button */
#event-form .btn-a {
    float: right;
}

/* Google Button */
.g-logo {
    margin-right: 6px;
    width: 25px;
    height: 25px;
}

.btn-a .g-logo+.btntxt {
    position: relative;
    top: -7px;
    font-weight: 600;
}

/* = Action Color Buttons */
.btn-a.lst {
    margin-top: 40px;
}

.btn-a {
    position: relative;
    display: inline-block;
    background: #000;
    border-radius: 10px;
    width: 100%;
}

.btn-a.nl {
    margin-left: -6px;
}

.btn-a-angle {
    position: absolute;
    z-index: 100;
    bottom: 0px;
}

.btn-a .btn-a-top-angle {
    top: -5px;
    left: 2px;
    width: 8px;
    height: 10px;
    background: url(../img/angle-top-bl-sq-sm.png?v=308719ee14d6) center no-repeat;
    background-size: cover;
}

.btn-a .btn-a-btm-angle {
    right: -3px;
    width: 8px;
    height: 10px;
    background: url(../img/angle-btm-bl-sq-sm.png?v=60bfbcfdc791) center no-repeat;
    background-size: cover;
}

.btn-a .inside {
    position: relative;
    z-index: 300;
    display: inline-block;
    top: -8px;
    right: -8px;
    width: 100%;
    height: 50px;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

.btn-a:hover .inside {
    top: -4px;
    right: -4px;
}

.btn-a:active .inside {
    top: 0;
    right: 0;
}

.btn-a:active .btn-a-angle {
    display: none;
}

.btn-a.white .inside {
    background: #fff;
}

.btn-a.green .inside {
    background: #5DF900;
}

.btn-a.orange .inside {
    background: #FFA406;
}

.btn-a.pink .inside {
    background: #FF34B9;
}

.btn-a.blue .inside {
    background: #41FFFF;
}

.btn-a.yellow .inside {
    background: #F9F932;
}

.btn-a.red .inside {
    background: #dc3545;
}

/* Text buttons */
.btn-link {
    display: inline-block;
    background: none;
    color: #000;
    text-decoration: underline;
    font-weight: 550;
}

/* Nonprofit selection buttons */
.lst-nps {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
}



/* = Icons
** ----------------------- */
.icn {
    display: inline-block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    text-indent: -9999px;
}

.eventdetails .row .icn {
    position: relative;
}

.icn.cal {
    top: -2px;
    background: url(../img/ic-calendar.svg?v=e5e3bdbd1721) center no-repeat;
}

.icn.globe {
    background: url(../img/ic-globe.svg?v=5178a98957bd) center no-repeat;
}

.icn.video {
    top: -1px;
    background: url(../img/ic-video.svg?v=f48c5d3d9be9) center no-repeat;
}

.icn.ticket {
    top: -1px;
    background: url(../img/ic-ticket.svg?v=98eda60d07ca) center no-repeat;
}

/* = Modular blocks
** ----------------------- */

/* Event details block */
.edb {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    text-align: left;
}

.edb .icn {
    flex: 0 0 29px; /* Fixed width, no grow or shrink */
    margin-right: 8px;
}


/* = Forms
** ----------------------- */

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

/* Form layout container & Event info container */
.form-layout-container,
.evntinfo {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 auto;
}

.form-layout-container {
    gap: 20px;
}

/* Left column: Main form */
.form-column {
    width: 100%;
}

.create .form-column {
    margin-bottom: 250px;
}





.agreementtext {
    margin-top: 8px;
    overflow-y: auto;
    min-height: 400px;
}
input::placeholder,
input::textarea {
  color: #6c6c6c;
  opacity: 1;
}

label {
    margin-bottom: 6px;
    text-align: left;
    float: left;
    font-size: 15px;
    font-weight: 600;
    opacity: 6;
}

/* Remove top space before label */
/* First remove top space before label in group */
.frmtsbl {
    margin-top: -12px;
}

.rmtsbl {
    margin-top: -8px;
}

form h2 {
    margin-bottom: 4px;
    font-size: 18px;
}

/* Validation */
.validation-feedback {
    position: absolute;
    display: block;
    height: 24px;
}

.validation-feedback.datetime-validation {
    position: static;
    display: block;
    text-align: right;
    /* margin-top: 8px; */
    margin-bottom: 12px;
    height: auto;
}


/* This one is for borders on things */
.validation-invalid {
    border: 2px solid #ff34b7 !important;
}

.validation-feedback.valid {
    top: 16px;
    right: 15px;
    width: 24px;
    text-indent: -9999px;
    overflow: hidden;
    color: #5DF900;
    background: url(../img/ic-check.svg?v=278d17404f86) center no-repeat;
}

.validation-feedback.invalid {
    bottom: 0;
    right: 8px;
    font-weight: 500;
    text-align: right;
    color: #ff34b7;
}

.payment-validation-error {
    position: absolute;
    right: 0;
    font-weight: 500;
    color: #ff34b7;
}

.info-btn {
    display: inline-block;
    float: left;
    margin-left: 6px;
    justify-content: center;
    background: #41FFFF;
    border: 2px solid #000;
    border-radius: 25px;
    cursor: pointer;
    width: 19px;
    height: 19px;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.info-btn span {
    position: relative;
    top: -2px;   
}

.or {
    display: block;
    margin: 4px 0;
}

.ent {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    text-align: left;
}

.upld {
    width: 100%;
    border-radius: 4px;
    padding: 24px 20px;
    font-size: 18px;
    color: #0d9494;
    background: #d1ffff;
    border: 2px solid #41ffff;
}
.upld:hover {
    color: #47742c;
    background: #dcffc7;
    border: 2px solid #5df900;
}





.pay-typ {
    margin-bottom: 6px;
}

/* Remove space before add space after */
.rsb {
    margin-top: -12px;
}

/* = Impact Categories
** --------------------------- */
.cats {
    display: block;
    text-align: left;
}

.cats .cat {
    display: inline-block;
    margin: 0 2px -1px 0;
    border-radius: 3px;
    padding: 0 5px 2px 5px;
    text-decoration: none;
    color: #000;
    font-size: 13px;
}

.cats .cat.arts {
    background: #CC66F7;
}

.cats .cat.edu {
    background: #41FFFF;
}

.cats .cat.env {
    background: #5DF700;
}

.cats .cat.anim {
    background: #FFA406;
}

.cats .cat.health {
    background: #FF34B7;
}

.cats .cat.spir {
    background: #69A3FF;
}

.cats .cat.rese {
    background: #C0CBF9;
}

.cats .cat.comm {
    background: #F7F732;
}


/* = Impact Cards
** ----------------------- */
.imptcrd {
    position: relative;
    display: inline-block;
    margin: 8px 10px 14px 0;
    max-width: 370px;
    border: 2px solid #000;
    border-radius: 8px;
    background: #fff;
}

.imptcrd .line-diagonal {
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 8px;
    height: 9px;
    background: url(../img/lin-diagnl.png?v=92655d4cd813) center no-repeat;
    background-size: cover;
}

.imptcrd .media-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.imptcrd .media-link img {
    height: 584px;
}

.io .imptcrd .ic-angle.top-angle,
.imptcrd .ic-angle.top-angle {
    top: -8px;
    left: 1px;
    width: 11px;
    height: 11px;
    background: url(../img/angl-top-wht-blk-bdr.png?v=53e1d62c61f5) center no-repeat;
    background-size: cover;
}

.io .imptcrd-side {
    margin-top: 200px; /* Increased from 69px to accommodate buttons */
    padding-right: 21px;
}

.io .imptcrd .ic-angle.btm-angle,
.imptcrd .ic-angle.btm-angle {
    right: -8px;
    bottom: 1px;
    width: 11px;
    height: 12px;
    background: url(../img/angl-btm-wht-blk-bdr.png?v=57e06f88f01b) center no-repeat;
    background-size: cover;
}

.imptcrd .inside {
    position: relative;
    z-index: 300;
    display: inline-block;
    top: -9px;
    right: -8px;
    margin-bottom: -4px;
    width: 366px;
    height: 580px;
    overflow-y: hidden;
    border: 2px solid #000;
    border-radius: 8px;
    background: #fff;
}

.imptcrd .inside .des {
    position: absolute;
    z-index: 300;
    display: inline-block;
    bottom: 0px;
    left: 0px;
    width: 100%;
    color: #fff;
    padding: 30px 11px 11px 11px;
    border-radius: 0 0 6px 6px;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100%);
    text-shadow: #000;
}

.imptcrd .inside .des,
.imptcrd .inside .des h4,
.imptcrd .inside .des p {
    text-align: left;
}

.imptcrd .inside .des h4 {
    margin-bottom: 0.25em;
    font-size: 13pt;
    font-weight: bold;
}

.imptcrd .inside .des p {
    margin-top: 0;
    font-family: "Noto Sans", Lato, Helvetica, Arial, sans-serif;
    font-size: 11pt;
    line-height: 15pt;
}

.imptcrd .inside video {
    width: 100%;
}

.imptcrd .actions {
    width: 100%;
    padding: 11px 0 6px 0;
}

.imptcrd video,
.imptcrd .inside > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imptcrd .des {
    position: relative;
    z-index: 2;
}

.imptcrd .cats {
    margin-top: 0.25em;
    width: 100%;
}


/* = Organization Profile */
.imptcrd .org {
    position: absolute;
    z-index: 300;
    display: flex;
    align-items: center;
    padding: 10px 11px 10px 11px;
}

.imptcrd .org .pfp {
    float: left;
    display: inline-block;
    margin-right: 8px;
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #000;
}

.imptcrd .org .name {
    display: inline-block;
    float: left;
    padding-top: 8px;
    color: #fff;
    font-size: 12pt;
    text-shadow: #000 0px 1px 3px;
}

.imptcrd .org .founded {
    font-family: "Noto Sans", Lato, Helvetica, Arial, sans-serif;
}

/* = Popups
** ----------------------- */
#cancelConfirmPopup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.cancel-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.popup-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.popup-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.popup-btn.danger {
    background-color: #FF34B9;
    color: #fff;
}

.popup-btn.danger:hover {
    background-color: #FF34B9;
}

.popup-btn.cancel {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}

.popup-btn.cancel:hover {
    background-color: #fff;
    color: #000;
}

/* = Screens
** ----------------------- */

/* Events */
.evnt .top-bnr {
    position: relative;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;   /* Centers vertically */
    box-sizing: border-box;
    margin-bottom: -5px;
    max-height: 800px;
    overflow-y: clip;
}

.evnt .top-bnr video {
    position: relative;
    z-index: -1;
    height: 100%;
}

.evnt .evntdes p {
    line-height: 24px;
}

/* Supported Nonprofits */
.evnt .supnps h3.sech {
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
}


/* Early Access Screen Spacing */
.erlyac .spce {
    margin-top: 64px;
}

/* Event Screen Password Box Spacing */
.evntdsply .spce {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* = Color Bars Top and Bottom Section */
section.cbtb {
    background: #fff;
}

section.cbtb .cb {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    height: 20px;
    gap: 0;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}

section.cbtb .col {
  width: 100%;
  height: 100%;
}

.col.blue { background: #41FFFF; }
.col.green { background: #5DF900; }
.col.yellow { background: #F9F932; }
.col.orange { background: #FFA406; }
.col.pink { background: #FF34B9; }

section.cbtb .content {
    padding: 50px 30px;
}

section.cbtb .content h2 {
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 34px;
    line-height: 37px;
    font-family:'Ultra', 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

section.cbtb .content p {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    word-break: keep-all;
    hyphens: none;
}

/* = Impact Organizations Feature Section */
.iosc h2 {
    margin-bottom: 18px;
    padding: 0 20px;
    font-weight: 500;
    font-size: 26px;
    line-height: 28px;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

/* = Event screens */

.evntinfo .box .box-inside {
    padding: 11px 12px 20px 12px;
}



.evntinfo .btn-a {
    margin-top: 25px;
    /* margin-left: -8px; maybe use at wider width */
    width: calc(100% - 10px);
}

.evntinfo .evntdate,
.evntinfo .evnttime,
.evntinfo .evntlocation {
    font-weight: 600;
    text-align: left;
}

.evntinfo .evntdate .eic,
.evntinfo .evnttime .eic,
.evntinfo .evntlocation .eic {
    width: 20px;
}

.evntinfo .evntdes {
    margin-top: -16px;
    text-align: left;
    font-size: 17px;
    line-height: 23px;
}

.evntinfo .dprice .details,
.evntinfo .dlocation .details {
    padding-top: 3px;
}




/* = Backgrounds
** ----------------------- */
.ani-bg-flgc {
  height: 100%;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.ani-bg-flgc svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* = Sections
** ----------------------- */

/* Event Management */
.evntmng .htop,
.evntmng .hsectop,
.evntmng p {
    text-align: left;
}

.evntmng .evntguests,
.evntmng .evntentries {
    margin-bottom: 10px;
    border-radius: 2px;
    padding: 10px 20px 18px 20px;
    background: #fff;
}

.evntmng .evntnonprofit {
    margin-top: 16px;
}

.evntmng .evntnonprofit .lst-nps {
    padding-top: 6px;
}

.entrytyp {
    display: block;
    margin-top: 20px;
}

/* = Media Queries
** ----------------------- */


@media (min-width: 900px) {
    .mhide {
        display: unset;
    }

    .form-layout-container,
    .evntinfo {
        flex-direction: row;
    }

    .form-column {
        flex: 0 0 425px;
    }

    .time-grp .grp-date-time {
        flex-direction: row;
    }

    .evntdsply .evntinfo {
        width: fit-content;
    }

    #event-form .btn-a {
        max-width: 423px;
    }

    .eventinfocol {
        max-width: 580px;
    }
}

/* = Alert Messages for Flash Messages
** ----------------------- */
.alert {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    padding: 12px 22px;
    font-weight: 500;
    background: #5DF900;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.alert.slide-out {
    transform: translate(-50%, -100%);
    opacity: 0;
}

/* = Media Upload Components
** ----------------------- */
.media-preview img {
    margin: 0 auto;
    display: block;
    border-radius: 4px;
    object-fit: cover;
    border: 2px solid #000;
}

.media-preview #youtube-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: #000;
}

.remove-btn {
    display: block;
    margin: 0 auto;
    background: #FF34B9;
    color: #fff;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

.remove-btn:hover {
    background: #e02a9f;
    transform: translateY(-1px);
}

.remove-btn:active {
    transform: translateY(0);
}

.error-message {
    display: block;
    margin-top: 8px;
    color: #8b2635;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    background: #ffd6dd;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #FF34B9;
}

/* ===== Auth Popup (Create Event) ===== */


/* Google sign-in pill */
/*
.g-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 100%;
  max-width: 360px;
  margin: 8px auto 10px;     a
  padding: 12px 20px;

  background: #fff;
  color: #1f1f1f;
  border: 2px solid #000;
  border-radius: 9999px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);

  font: 700 16px/1.1 "Figtree", Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: transform .02s ease, box-shadow .15s ease, background-color .15s ease;
}

.g-signin-btn:hover {
  background: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

.g-signin-btn:active {
  transform: translateY(1px);
}

.g-signin-btn .g-logo {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.g-signin-btn .g-logo svg {
  display: block;
  width: 18px;
  height: 18px;
}

.g-signin-btn .g-text {
  white-space: nowrap;
}
*/

/* Hide the guest/anonymous option entirely if it’s still in the DOM */
.auth-continue-guest { display: none !important; }

/* Legal copy inside popup */
.auth-legal {
  margin-top: 8px;
  font-size: 12px;
  text-align: left;
  opacity: .9;
}


/* = Event Form Layout Styles (from create.html form updates)
** & Event Display Styles (from register.html)
** ----------------------- */

/* Right column: Image upload */
.upload-column,
.eventinfocol {
    width: 100%;
}

.upload-column .fw {
    margin-bottom: 10px;
}

/* Form dropdown styling */
.form-dropdown {
    width: 100%;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Figtree', Helvetica, Arial, sans-serif;
    background: #fff;
    text-align: left;
}

/* Current background image styles */

.current-image-preview {
    width: 204px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #000;
}

/* Upload tile styling - matching .btn-np dimensions */
/* Upload tile styling - smartphone aspect ratio (9:16) */


/* Image preview styling - smartphone aspect ratio (9:16) */
.image-preview {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #000;
}

/* Label with info button layout - fixed alignment */
.label-with-info {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 11px;
    margin-bottom: 6px;
    text-align: left;
}

.label-with-info label {
    display: block;
    margin-bottom: 0;
    margin-right: 0;
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
}

.label-with-info .info-btn {
    display: inline-block;
    margin-left: 0;
    float: none;
    vertical-align: baseline;
    flex-shrink: 0;
}

/* Ensure the label has proper styling */
.label-with-info label.fw {
    width: auto;
    text-align: left;
}

/* Info popup text styling */
.info  {
    clear: both;
    padding: 0 0 14px 0;
    font-size: 14px;
    text-align: left;
    width: 100%;
}


/* Timezone Modal Styles - Mobile-First, Centered Design */
.timezone-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.timezone-modal-content {
    background: white;
    border: 2px solid #000;
    border-radius: 10px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
}

.timezone-modal-header {
    padding: 20px;
    border-bottom: 2px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.timezone-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #000;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    font-weight: bold;
}

.close-modal:hover {
    background-color: #f5f5f5;
}

.timezone-search {
    padding: 20px;
    border-bottom: 2px solid #000;
}

.timezone-search input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 16px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}

.timezone-search input:focus {
    border-color: #5DF900;
}

.timezone-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 200px;
    max-height: 400px;
}

.timezone-section {
    margin-bottom: 0;
}

.timezone-section-title {
    padding: 12px 20px 8px 20px;
    font-weight: 600;
    color: #000;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

.timezone-item {
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.15s ease;
    background: white;
}

.timezone-item:hover {
    background-color: #f8f9fa;
    border-left: 3px solid #5DF900;
}

.timezone-item:active {
    background-color: #5DF900;
    transform: translateX(2px);
}

.timezone-name {
    font-weight: 500;
    color: #000;
    font-size: 14px;
    margin-bottom: 2px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

.timezone-id {
    font-size: 12px;
    color: #666;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .timezone-modal {
        padding: 15px;
    }

    .timezone-modal-content {
        max-height: 90vh;
        max-width: 100%;
    }

    .timezone-modal-header {
        padding: 15px;
    }

    .timezone-search {
        padding: 15px;
    }

    .timezone-modal-header h3 {
        font-size: 16px;
    }

    .timezone-item {
        padding: 14px 15px;
    }

    .timezone-section-title {
        padding: 10px 15px 6px 15px;
    }
}

/* Ensure timezone button looks clickable and matches your design */
.time-zn {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Autocomplete dropdown styles */
/* margin-bottom overridden to 0 to help with spacing of restrict visibility section below this */
.location-input-group {
    position: relative;
    margin-bottom: 6px;  
}

/* create.html and edit.html - sections for those here */

/* Capacity Number Input */
.capacity-number-input {
    width: 58px;
}
.capacity-number-input.o0 {
    pointer-events: none;
    cursor: default;
}

/* Green border when focused/active */
.capacity-number-input:focus {
    border: 2px solid #5DF900 !important;
}

.capacity-number-input::-webkit-inner-spin-button,
.capacity-number-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove any placeholder text */
.capacity-number-input::placeholder {
    color: transparent;
}

/* Mobile Responsiveness */


/* Mobile responsive */

/* Description box style*/

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background-color: #f5f5f5;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-main {
    font-weight: 500;
    color: #333;
}

.autocomplete-secondary {
    font-size: 0.9em;
    color: #666;
    margin-top: 2px;
}

/* Input prefix styling */
.input-with-prefix {
    position: relative;
}

.input-prefix {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #000;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1;
}

.input-with-prefix input {
    padding-left: 30px !important;
}

/* Special handling for .rsb (Fixed price) fields which have margin-top: -12px */
.frm-lbl-grp.input-with-prefix.rsb .input-prefix,
.frm-lbl-grp.input-with-prefix input.rsb ~ .input-prefix {
    top: 22px; /* Compensate for the -12px margin on .rsb */
}

/* Adjust positioning when label is floating (input has content or is focused) */
.input-with-prefix input:focus ~ .input-prefix,
.input-with-prefix input:not(:placeholder-shown) ~ .input-prefix {
    top: 10px; /* Stays at same position since text moves down with padding change */
}

/* For .rsb fields, maintain the adjusted position */
.frm-lbl-grp.input-with-prefix.rsb input:focus ~ .input-prefix,
.frm-lbl-grp.input-with-prefix.rsb input:not(:placeholder-shown) ~ .input-prefix,
.frm-lbl-grp.input-with-prefix input.rsb:focus ~ .input-prefix,
.frm-lbl-grp.input-with-prefix input.rsb:not(:placeholder-shown) ~ .input-prefix {
    top: 22px;
}

/* Make sure the input has proper padding for the prefix + space */
.input-with-prefix input {
    padding-left: 30px !important; /* Increased from 25px to 30px for spacing */
}

/* When input has content, also adjust the left padding */
.input-with-prefix input.slbs:focus,
.input-with-prefix input.slbs:not(:placeholder-shown) {
    padding-left: 30px !important; /* Increased from 25px to 30px for spacing */
}

/* Optional: Style the prefix differently when input is focused */
.input-with-prefix input:focus ~ .input-prefix {
    color: #333;
}

/* ===== REGISTER PAGE: CAPACITY DISPLAY ===== */
/* People emoji icon */
.icn.people {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icn.people::before {
    content: "👥";
    display: inline-block;
    text-indent: 0;
}

/* Bold capacity text */
.dcapacity {
    font-weight: 600;
    font-size: 17px;
    text-align: left;
}


/* Multi-day event display table styling */
    .multi-day-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .multi-day-table {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0 auto;
        padding: 0;
    }

    .multi-day-table td {
        border: none;
        padding: 0;
        margin: 0;
        vertical-align: top;
    }

    .multi-day-table td:first-child {
        text-align: left;
        padding-right: 8px;
    }

    .multi-day-table td:nth-child(2) {
        text-align: center;
        padding: 0 4px;
    }

    .multi-day-table td:last-child {
        text-align: left;
        padding-left: 8px;
    }

    .multi-day-table .date-row {
        font-weight: 400;
    }

    .multi-day-table .time-row {
        font-weight: 400;
    }


    .my-events-section-separator {
    height: 1px;
    background: rgba(0, 0, 0, 0.15);
    margin: 40px 0;
}


/* Location link styling */
.location-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Event Managers Styling  */

/* .managers-list-container {
    background: white;
} */

.managers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.managers-header .hsectop {
    margin: 0;
}

.btn-edit-manager {
    background: none;
    border: none;
    color: #000;
    text-decoration: underline;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
}

.btn-edit-manager:hover {
    color: #374151;
}


.manager-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 12px;
}

.manager-row:last-child {
    margin-bottom: 0;
}

/* Profile image styles matching base.html */
.pfp, .pfpplhldr {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 2px solid #000;
    flex-shrink: 0;
}

.pfpplhldr {
    background: #F9F932;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 650;
    color: #000;
}

.pfp {
    object-fit: cover;
}

.pfp.lrg,
.pfpplhldr.lrg {
    width: 100px;
    height: 100px;
}

/* Skeleton state: override the yellow placeholder fill with neutral grey
   while the connections feed is loading. */
.user.is-skeleton .pfpplhldr {
    background: #e0e0e0;
    border-color: #c8c8c8;
}

.user.is-skeleton .skeleton-line {
    display: block;
    height: 14px;
    background: #c8c8c8;
    border-radius: 4px;
    margin: 3px 0;
}

.user.is-skeleton .skeleton-line.title {
    width: 140px;
}

.user.is-skeleton .skeleton-line.short {
    width: 80px;
    height: 12px;
}

.manager-details {
    display: flex;
    align-items: center;
    gap:has() 8px;
}

.btn-remove-manager {
    background: white;
    color: #dc2626;
    border: 1px solid #dc2626;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-manager:hover {
    background: #dc2626;
    color: white;
}

/* Add Manager Modal */

.add-manager-modal {
    max-width: 380px;
    width: 50%;
    position: relative;
}

.modal-title-centered {
    font-family: 'Figtree', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin: 16px 16px 16px 16px;
}

.modal-description-centered {
    font-size: 18px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}


.form-group {
    margin-bottom: 16px;
}

.form-input {
    width: 100%;
    padding: 12px;
    background: white;
    border: 2px solid #000;
    border-radius: 6px;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #eaeaea;
}

.btn-send-invite {
    width: 100%;
    background: white;
    color: #000;
    border: 2px solid #000;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-sizing: border-box;
}

.btn-send-invite:hover:not(:disabled) {
    background: #e4e4e4;
    transform: translateY(-1px);
}

.btn-send-invite:disabled {
    opacity: 0.5;
}

.error-message {
    background: #fee2e2;
    color: #dc2626;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 600px) {
    .managers-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .manager-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .btn-remove-manager {
        width: 100%;
    }
}

/* Maps Dropdown Styles */
.maps-dropdown {
    position: absolute;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 220px;
}

.maps-dropdown-content {
    padding: 8px;
}

.maps-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: white;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    font-size: 15px;
    color: #333;
}

.maps-option:hover {
    background-color: #f5f5f5;
}

.maps-icon {
    font-size: 20px;
}

/* Clickable row styling for addresses and dates */
.location-link-clickable,
.date-link-clickable {
    color: inherit;
    /* text-decoration: underline; */
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.location-link-clickable:hover,
.date-link-clickable:hover {
    opacity: 0.7;
}

.location-link-clickable:focus,
.date-link-clickable:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
    border-radius: 3px;
}

.location-link-clickable:focus {
    margin-bottom: 4px;
}

/* Calendar dropdown (used by CalendarIntegration for add-to-calendar) */
.calendar-dropdown {
    position: absolute;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 220px;
}

.calendar-dropdown-content {
    padding: 8px;
}

.calendar-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: white;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    font-size: 15px;
    color: #333;
}

.calendar-option:hover {
    background-color: #f5f5f5;
}

.calendar-icon {
    font-size: 20px;
}

@media (max-width: 768px) {
    .calendar-dropdown {
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* Keep existing styling for disabled location links */
.location-link {
    color: inherit;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .maps-dropdown {
        left: 50% !important;
        transform: translateX(-50%);
    }
}


/* ============================================
   LOCALIZED DRAG AND DROP STYLES
   ============================================ */

/* Hint state - shows when dragging anywhere on page */
.upload-tile.drop-hint-active,
.media-preview.drop-hint-active {
    position: relative;
    border: 4px dashed #ffffff;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(157, 157, 157, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(139, 139, 139, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(21, 21, 21, 0);
    }
}



.upload-tile.drop-hint-active::after {
    background: #ffffff;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    animation: fade-in 0.3s ease;
}

.media-preview.drop-hint-active::after {
    background: #ffffff;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    animation: fade-in 0.3s ease;
}


@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Active drop zone hover states */
.upload-tile.drag-over {
    border: 4px solid #ffffff;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.upload-tile.drag-over .upload-icon {
    transition: transform 0.2s ease;
}

.upload-tile.drag-over .upload-icon img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(2086%) hue-rotate(197deg) brightness(94%) contrast(101%);
}

/* When image exists, style the preview container on drag */
.media-preview.drag-over {
    position: relative;
    border: 4px solid #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
}

.media-preview.drag-over::before {
    content: attr(data-drop-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.97);
    padding: 16px 24px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    border: 1px solid rgba(169, 169, 169, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 10;
    pointer-events: none;
}

.media-preview.drag-over .image-preview {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Ensure smooth transitions */
.upload-tile,
.media-preview {
    transition: all 0.2s ease;
}

/* Prevent any image or child elements from interfering with drag events */
.upload-tile.drag-over *,
.media-preview.drag-over *,
.upload-tile.drop-hint-active *,
.media-preview.drop-hint-active * {
    pointer-events: none;
}

/* Upload error message with new color scheme */
#upload-error {
    color: #cc0000;
    font-size: 14px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid rgba(204, 0, 0, 0.15);
}

/* ===== NONPROFIT SELECTION STYLES ===== */

/* Main page nonprofit button container - 2 buttons per row */
.lst-nps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: 20px;
}

.lst-nps .btn-np {
    min-width: 0; /* prevent overflow in grid cell */
}

/* Nonprofit Modal Styles */
.nonprofit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    overflow: auto;
}

.nonprofit-modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    max-width: 900px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.nonprofit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.nonprofit-modal-header h3 {
    margin: 0;
    font-size: 1.5em;
}

.close-modal {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    color: #333;
}

.nonprofit-search {
    margin-bottom: 20px;
}

.nonprofit-search input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}



/* Modal item container */
.nonprofit-modal-item {
    width: 100%;
    display: flex;
}

/* Remove old nonprofit-card styles if they exist */
.nonprofit-card {
    display: none !important;
}

/* Pagination */
.nonprofit-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
}

.nonprofit-pagination button {
    padding: 5px 12px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.nonprofit-pagination button:hover {
    background: #f5f5f5;
}

.nonprofit-pagination button.active {
    background: #333;
    color: white;
    border-color: #333;
}

.nonprofit-error {
    margin-bottom: 15px;
}

/* ===== MOBILE RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
    
    /* Modal adjustments for mobile */
    .nonprofit-modal-content {
        width: 95%;
        margin: 10px auto;
        padding: 15px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .nonprofit-modal-header h3 {
        font-size: 1.2em;
    }
    
    /* Improve pagination for mobile */
    .nonprofit-pagination {
        flex-wrap: wrap;
    }
    
    .nonprofit-pagination button {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Nonprofit sponsorship on registration page */
/* .nonprofit-sponsor-section {
    margin-top: 2rem;
} */

.sponsor-label {
    color: #000;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: left;
}

.single-nonprofit {
    max-width: 400px; 
}

.single-nonprofit .btn-np {
    margin-bottom: 0;
}

/* Make nonprofit clickable link inherit styles */
a.nonprofit-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.nonprofit-link:hover .shade {
    opacity: 0.95;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .single-nonprofit {
        max-width: 100%;
    }
}


/* Nonprofit confirmation modal */
.np-confirm-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.np-confirm-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.np-confirm-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
}

.np-confirm-content p {
    margin: 0 0 1.5rem 0;
    color: #666;
}

.np-confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.np-confirm-buttons button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s;
}

.np-btn-confirm {
    background: #000;
    color: white;
}

.np-btn-cancel {
    background: #f0f0f0;
    color: #333;
}

.np-btn-confirm:hover,
.np-btn-cancel:hover {
    opacity: 0.8;
}

/* Hover effect for clickable nonprofit */
.nonprofit-clickable:hover .shade {
    opacity: 0.95;
}

/* Mobile responsiveness for modal */
@media (max-width: 768px) {
    .np-confirm-content {
        padding: 1.5rem;
    }
    
    .np-confirm-buttons {
        flex-direction: column;
    }
    
    .np-confirm-buttons button {
        width: 100%;
    }
}

/* ============================================================================
   EVENT CANCELLATION STYLES
   ============================================================================ */

/* Cancelled badge on my-events page - gray version of NEW badge */
.cancelled-badge {
    display: inline-block;
    background: #999;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 12px;
    vertical-align: middle;
}

/* ============================================
   TICKET TYPES UI
   ============================================ */


/* Individual Ticket Box - matching timezone box style */





.ticket-type-label {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    text-align: left;
}

.ticket-type-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ticket-control-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #000;
    font-size: 18px;
    transition: opacity 0.2s;
}

.ticket-control-btn:hover {
    opacity: 0.7;
}

.ticket-control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}



/* Dynamic Fields Container */
.ticket-dynamic-fields {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Price Fields Row */
.price-fields-row {
    display: flex;
    gap: 5px;
}

.price-fields-row .frm-lbl-grp {
    flex: 1;
    margin-bottom: 5px;
}

/* Additional Options Toggle - LEFT ALIGNED */


/* Ticket sales start/end date+time row */





/* Base positioning for dollar sign */
/*
.ticket-dynamic-fields .input-prefix,
.ticket-additional-options .input-prefix {
    position: absolute;
    left: 12px;
    top: 0px; 
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 1;
    font-weight: 500;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    transition: none;  
}
    */

/* When label is visible (focus or has value), adjust dollar sign position */
.ticket-dynamic-fields .input-with-prefix input:focus ~ .input-prefix,
.ticket-dynamic-fields .input-with-prefix input:not(:placeholder-shown) ~ .input-prefix,
.ticket-additional-options .input-with-prefix input:focus ~ .input-prefix,
.ticket-additional-options .input-with-prefix input:not(:placeholder-shown) ~ .input-prefix {
    top: 22px;  /* Align with text when label is showing */
}

/* Dynamic Suffix Styling (for % that follows text) */
.input-with-dynamic-suffix {
    position: relative;
}

.input-suffix-dynamic {
    position: absolute;
    left: 12px; /* Will be updated by JS */
    top: 10px;  /* Same as input-prefix default */
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    pointer-events: none;
    z-index: 1;
    font-weight: 500;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    display: none; /* Hidden until text is entered */
}

/* Hidden element for measuring text width */
.input-measure {
    position: absolute;
    left: -9999px;
    top: 0;
    visibility: hidden;
    white-space: pre;
    font-size: 16px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 400;
    padding: 0;
}

/* For always-visible labels, position suffix lower to match text */
.ticket-dynamic-fields .frm-lbl-grp.always-visible .input-suffix-dynamic {
    top: 9px !important;  /* Matches input-prefix positioning */
}

.input-with-dynamic-suffix input:focus ~ .input-suffix-dynamic {
    color: #333;
}

.ticket-control-btn svg {
    display: block;
}



/* General Modal System */
.general-modal {
    position: fixed !important;
    z-index: 9999;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    max-width: none !important;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    transform: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.general-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.general-modal-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    color: #333;
}

.general-modal-content p {
    margin: 0 0 1.5rem 0;
    color: #666;
    line-height: 1.5;
    white-space: pre-wrap;
}

.general-modal-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.general-modal-buttons button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s;
    min-width: 100px;
}

.modal-btn-confirm {
    background: #000;
    color: white;
}

.modal-btn-cancel {
    background: #f0f0f0;
    color: #333;
}

.modal-btn-default {
    background: #000;
    color: white;
}

.modal-btn-confirm:hover,
.modal-btn-cancel:hover,
.modal-btn-default:hover {
    opacity: 0.8;
}

/* Error modal variant */
.general-modal.error .general-modal-content h3 {
    color: #d32f2f;
}

.general-modal.error .general-modal-content {
    border-top: 4px solid #d32f2f;
}

/* Inline validation for ticket type fields */
.ticket-field-error {
    border-color: #d32f2f !important;
    background-color: #ffebee !important;
}

.ticket-error-message {
    display: block;
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .general-modal-content {
        padding: 1.5rem;
        max-width: 90%;
    }
    
    .general-modal-buttons {
        flex-direction: column;
    }
    
    .general-modal-buttons button {
        width: 100%;
    }
}


/* Stripe Management Page */
.stripe-status-card {
    background: white;
    border-radius: 8px;
    padding: 40px;
    margin: 70px auto 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 600px;
}

.status-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.status-icon {
    width: 48px;
    height: 48px;
}

.status-icon.success {
    color: #10b981;
}

.status-icon.warning {
    color: #f59e0b;
}

.stripe-connected h2,
.stripe-not-connected h2 {
    text-align: center;
    margin-bottom: 10px;
}

.status-subtitle {
    text-align: center;
    color: #000000;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

.status-subtitle.status-warning {
    /* color: #f59e0b; */
    /* display: inline-block; */
    /* padding: 4px 12px; */
    /* border-radius: 12px; */
    /* background: #fed7aa; */
    color: #4b5563 ;
    font-weight: 600;
}

.account-details {
    background: #f9fafb;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    color: #374151;
}

.detail-value {
    color: #6b7280;
    font-family: monospace;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.enabled {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.pending {
    background: #fed7aa;
    color: #92400e;
}

.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
}

.external-link-icon {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.stripe-action-buttons {
    display: flex;
    gap: 6px;
    margin: 20px 0 0;
    justify-content: center;
    flex-direction: column;
}

/* @media (min-width: 480px) {
    .stripe-action-buttons {
        flex-direction: row;
    }
    
    .stripe-action-buttons .btn-stripe-primary,
    .stripe-action-buttons .btn-stripe-secondary {
        flex: 1;
        max-width: 250px;
    }
} */

/* Replace Account Modal */
#replaceAccountModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#replaceAccountModal .modal-content {
    background: white;
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
}

#replaceAccountModal h3 {
    margin-bottom: 15px;
}

.modal-warning {
    color: #dc2626;
    margin: 15px 0;
    text-align: left;
}

.modal-warning-top {
    margin: 15px 0;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
}


/* Stripe Connect Modal */
.stripe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.stripe-modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.stripe-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.stripe-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.stripe-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 25px;
}

.stripe-modal-close:hover {
    color: #374151;
}

.stripe-modal-body {
    padding: 12px 25px;
}

/* .stripe-modal-body p {
    margin: 0;
    line-height: 1.6;
    color: #374151;
} */

.stripe-modal-buttons {
    padding: 0 25px 25px;
    display: flex;
    gap: 6px;
    flex-direction: column;
}

.btn-stripe-primary,
.btn-stripe-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 400;
    min-height: 48px;
    box-sizing: border-box; 
	/* font-family: "Figtree", Helvetica, Arial, sans-serif; */
    text-decoration: none;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
}

.btn-stripe-primary {
    background: #000;
    color: white;
    border: 2px solid #000;
}

.btn-stripe-primary:hover {
    background: #ffffff;
    border-color: #000000;
    color: black;

}

.btn-stripe-secondary {
    background: white;
    color: #000;
    border: 2px solid #000;
}

.btn-stripe-secondary:hover {
    background: #000000;
    color: white;
}

/* @media (min-width: 480px) {
    .stripe-modal-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .btn-stripe-primary,
    .btn-stripe-secondary {
        flex: 1;
    }
} */


/* Stripe Account Page Background */
body.stripe-account {
    background: #F9F932;
}

h2.stripe-title {
    /* margin-bottom: 10px; */
    font-size: 20px;
    font-weight: 600;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}


/* Separator for replace account section */
.stripe-separator {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 30px 0 20px;
}

/* Replace account section */
.replace-account-section {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.btn-stripe-connected {
    background: white;
    color: #000;
    border: 2px solid #000;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

.btn-stripe-connected:hover {
    background: #000;
    color: white;
}

.btn-stripe-connected {
    text-decoration: none;
}


/* ========== Ticket Types Styles ========== */

/* Multiple ticket boxes container */
.ticket-boxes-container {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* Top section: ticket info + quantity controls */
.ticket-box-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Left side: ticket name and price - grows to fill available space */
.ticket-box-top-left {
    flex: 1;
    text-align: left;
    min-width: 0; /* Allows text to wrap properly */
}

/* Bottom section: description */
.ticket-box-bottom {
    text-align: left;
}

.ticket-description {
    margin: 0;
    font-size: 0.95em;
    color: #333;
    line-height: 1.4;
    text-align: left;
}

.qty-display {
    min-width: 28px;
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    flex-shrink: 0;
}

/* Sold out and not available badges */
.sold-out-badge,
.not-available-badge {
    font-weight: bold;
    color: #999;
    font-size: 0.95em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .ticket-box {
        padding: 10px;
    }
}

/* Disabled ticket type dropdown */
.ticket-type-dropdown:disabled {
    background-color: #f5f5f5;
    /* color: #999; */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Locked notice for tickets with sales */
.ticket-locked-notice {
    font-size: 12px;
    color: #000000;
    font-style: normal;
    /* margin-top: 4px; */
    margin-bottom: 4px;
    /* padding: 0px 0px; */
    /* background-color: #f8f8f8; */
    /* border-radius: 4px; */
    text-align: left;
}

/* Disabled delete button */
.ticket-control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    color: #999;
}

.ticket-control-btn.disabled:hover {
    background-color: transparent;
    color: #999;
}

.ticket-control-btn:disabled:hover {
    background-color: transparent;
    color: #999;
}


/* ============================================================================
   MANAGE ACCOUNT PAGE STYLES
   ============================================================================ */

/* Account card container */
.account-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin: 70px auto 0;  
    max-width: 600px;
}

.account-title {
    /* margin-bottom: 10px; */
    font-size: 20px;
    font-weight: 600;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

.account-subtitle {
    text-align: center;
    color: #000000;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    padding-bottom: 24px;
}

/* Preference sections */
.preference-section {
    margin-bottom: 8px;
}

/* .preference-master {
    padding-bottom: 12px;
} */

.preference-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 12px 0;
}

/* Preference row layout - three-column grid for true centering */
.preference-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 0;
}

/* Empty first column balances the toggle on the right */
.preference-row::before {
    content: '';
}

.preference-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.preference-control {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preference-label {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.preference-description {
    font-size: 14px;
    color: #6b7280;
}

/* Disabled state for individual preferences */
.preferences-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.preferences-disabled .preference-label,
.preferences-disabled .preference-description {
    color: #9ca3af;
}

/* Interval dropdown */
.preference-interval-dropdown {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}

.preference-interval-dropdown:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   SAVE INDICATOR
   ============================================================================ */

.save-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.save-indicator.saving,
.save-indicator.success,
.save-indicator.error {
    opacity: 1;
}

.save-indicator.success {
    color: #059669;
}

.save-indicator.error {
    color: #dc2626;
}

/* Spinner animation */
.save-indicator .spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-top-color: #111827;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* ============================================================================
   MANAGE ACCOUNT - MISC SETTINGS TAB
   ============================================================================ */

/* High score display value */
.high-score-value {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    font-family: 'Roboto Slab', Georgia, serif;
}

/* High score row - no toggle, just display */
.high-score-row .preference-control {
    min-width: 60px;
    justify-content: center;
}

/* ============================================================================
   MANAGE ACCOUNT RESPONSIVE
   ============================================================================ */

@media (max-width: 600px) {
    .account-card {
        padding: 24px;
        margin-top: 24px;
    }
    
    .preference-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .preference-row::before {
        display: none;
    }
    
    .preference-info {
        text-align: left;
    }
    
    .preference-control {
        align-self: flex-end;
    }
}


/* ============================================
   HIDE ADDRESS SECTION ADJUSTMENT
   ============================================ */

/* Ensure hide address section spacing works with new component */

/* Google Connect Modal */
.google-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.google-modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.google-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: left;
    position: relative;
    justify-content: left;
}

.google-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    text-align: center;
    flex: 1;
}

.google-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 25px;
}

.google-modal-close:hover {
    color: #374151;
}

.google-modal-body {
    padding: 20px 25px;
}

.google-modal-body p {
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: #000000;
    text-align: left;
}

.google-modal-details {
    background: #f4f4f4;
    border-radius: 15px;
    padding: 15px;
    margin-top: 15px;
    text-align: left;
}

.google-modal-details p {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.google-modal-details ul {
    margin: 0 0 10px 0;
    padding-left: 20px;
    text-align: left;
}

.google-modal-details li {
    font-size: 14px;
    color: #374151;
    margin-bottom: 5px;
    text-align: left;
}

.google-modal-note {
    font-size: 13px;
    color: #6b7280;
    margin: 10px 0 0 0 !important;
}

.google-modal-buttons {
    padding: 0 25px 25px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.btn-google-primary,
.btn-google-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    min-height: 48px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-google-primary {
    background: #fff;
    color: #374151;
    border: 2px solid #e5e7eb;
    gap: 10px;
}

.btn-google-primary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.btn-google-primary .google-icon {
    flex-shrink: 0;
}

.btn-google-secondary {
    background: transparent;
    color: #6b7280;
    border: 2px solid transparent;
}

.btn-google-secondary:hover {
    background: #f3f4f6;
}



/* ============================================================================
   ACCOUNT TABS
   ============================================================================ */

.account-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
}

.account-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.account-tab:hover {
    color: #111827;
    background-color: #f3f4f6;
}

.account-tab.active {
    color: #111827;
    background-color: #f3f4f6;
    border-color: #e5e7eb;
}

.google-tab-icon {
    flex-shrink: 0;
}

/* Tab panels */
.account-tab-panel {
    position: relative;
}

.hidden {
    display: none;
}


/* ============================================================================
   LOGIN TAB CONTENT
   ============================================================================ */

/* Password section — subtitle and button inline above 480px, stacked below */
.password-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.password-row .password-subtitle {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding-bottom: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .password-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.google-status-section {
    margin-bottom: 24px;
}

.google-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.google-status-row:last-child {
    border-bottom: none;
}

.google-status-row.hidden {
    display: none;
}

.google-status-label {
    font-size: 14px;
    color: #6b7280;
}

.google-status-value {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.google-email {
    font-family: monospace;
    font-size: 13px;
    background-color: #f9fafb;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

.status-connected,
.status-authorized {
    color: #059669;
    background-color: #d1fae5;
}

.status-disconnected {
    color: #6b7280;
    background-color: #f3f4f6;
}

.status-not-authorized {
    color: #d97706;
    background-color: #fef3c7;
}

/* Google action buttons */
.google-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.btn-google-connect,
.btn-google-reauth {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-google-connect:hover,
.btn-google-reauth:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.btn-google-connect:disabled,
.btn-google-reauth:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-google-connect.hidden,
.btn-google-reauth.hidden {
    display: none;
}

.google-btn-icon {
    flex-shrink: 0;
}

.btn-google-disconnect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #dc2626;
    background-color: #ffffff;
    border: 1px solid #fecaca;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-google-disconnect:hover {
    background-color: #fef2f2;
    border-color: #f87171;
}

.btn-google-disconnect:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-google-disconnect.hidden {
    display: none;
}


/* ============================================================================
   ACCOUNT TABS RESPONSIVE
   ============================================================================ */


/* Cancel error message */
.cancel-error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.cancel-error-message p {
    color: #dc2626;
    margin: 0;
}

/* ============================================================================
   MAINTENANCE BANNER
   ============================================================================ */

.maintenance-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #ff8c00;
    padding: 12px 20px;
    text-align: center;
    transform: translateY(0);
    transition: transform 0.3s ease-out;
}

.maintenance-banner.hiding {
    transform: translateY(-100%);
}

.maintenance-banner-text {
    color: #000;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Ticket summary section on manage event page */
.evntentries .hsectop {
    margin-bottom: 0.75rem;
}

.evntentries .ticket-type-item {
    margin-bottom: 1.0rem;
}

.evntentries .ticket-type-item:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   INVITE GUESTS BUTTON & SECTION HEADER
   ========================================================================= */

/* Section header row - flex container for h2 + action button */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-header-row .hboxtop {
    text-align: left !important;
    margin-bottom: 0;
}

/* =============================================================================
   INVITE GUESTS MODAL
   ============================================================================= */

/* Modal Container */
.invite-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

/* Squad invite modal - layered for confetti */
.squad-invite-overlay {
    z-index: 10000;
}
.squad-invite-modal {
    z-index: 10002;
    background: transparent;
}

.squad-invite-modal {
    pointer-events: none;
}
.squad-invite-modal .mdlbox {
    pointer-events: auto;
}

.invite-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.invite-modal-content {
    position: relative;
    margin: 40px auto 20px auto;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 4px solid #000;
    border-radius: 8px;
    box-shadow: -1px 1px 0 #000, -2px 2px 0 #000, -3px 3px 0 #000, -4px 4px 0 #000, -5px 5px 0 #000, -6px 6px 0 #000, -7px 7px 0 #000;
}

/* Modal Header */

.invite-title-main[data-clickable="true"] {
    cursor: pointer;
    text-decoration: underline;
}

.invite-title-main[data-clickable="true"]:hover {
    color: #333;
}

/* Modal Body */

.invite-page {
    display: block;
}

/* Error Message */
.invite-error-message {
    background: #ffd6dd;
    border: 1px solid #FF34B9;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    color: #8b2635;
    font-size: 14px;
    font-weight: 500;
}

/* CSV Upload Zone */
.upldbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 2px solid #28FFFF;
    border-radius: 8px;
    background: #E7FFFF;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.upldbox.hidden {
    display: none;
}
.upldbox:hover {
    background: #d4ffff;
}

.upldbox.drag-over {
    border-style: dashed;
    border-width: 3px;
    background: #c8ffff;
}

.csv-upload-icon {
    width: 24px;
    height: 24px;
    background: url(../img/ic-csv.svg?v=e8103d39c65a) center no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

.upldbox p {
    color: #04D2D7;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.account-pfp-upload-text {
    text-align: center !important;
}

#pfpUploadZone {
    margin: 0 auto;
    margin-bottom: 10px;
    height: 200px;
    width: 200px;
    border-radius: 100%;
    padding: 5px;
    flex-direction: column;
    gap: 4px;
}

#panel-profile .frm-lbl-grp,
#panel-profile .btn-fs {
    max-width: 450px;
}

#panel-profile {
    padding-bottom: 10px;
}

#profile-display-name {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#panel-profile .remove-btn {
    margin-bottom: 15px;
}

.pfp-upload-icon {
    display: block;
    width: 32px;
    height: 32px;
    background-color: #04D2D7;
    -webkit-mask: url(../img/ic-photo.svg?v=d0cf95e0c4e8) center/contain no-repeat;
    mask: url(../img/ic-photo.svg?v=d0cf95e0c4e8) center/contain no-repeat;
    opacity: 0.8;
}

#panel-profile .profile-error-msg {
    color: #cc0000;
    font-size: 14px;
    margin-top: 10px;
}

.upldbox.drop-hint-active {
    position: relative;
    border: 4px dashed #ffffff;
    animation: pulse-border 2s infinite;
}

.upldbox.drop-hint-active * {
    pointer-events: none;
}

/* View Invited Guests Button */
.btn-view-invited {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #000;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    margin-bottom: 12px;
}

.btn-view-invited:hover {
    background: #000;
    color: #fff;
}

.btn-view-invited:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Email Input Container */
.email-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.email-input-wrapper {
    position: relative;
    flex: 1;
}

.email-input-field {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #000;
    border-radius: 8px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    background: #fff;
    transition: border-color 0.15s ease;
}

.email-input-field:focus {
    outline: none;
    border-color: #b5ff75;
}

.email-input-field::placeholder {
    color: #999;
}

.email-input-spinner {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid #e9ecef;
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.btn-add-email {
    padding: 12px 18px;
    border: 2px solid #000;
    border-radius: 8px;
    background: #000;
    color: #fff;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-add-email:hover {
    background: #fff;
    color: #000;
}

/* Shake animation for invalid email */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.btn-add-email.shake {
    animation: shake 0.4s ease;
}

/* Email List Container */
.email-list-container {
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 16px;
}


.email-list-content {
    /* Container for visible email rows */
}

/* Individual Email Row */
.email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    height: 44px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
}

.email-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: #E3E3E3;
}

.email-row:last-child::after {
    display: none;
}

/* Border radius for first/last email rows */
.email-list-content .email-row:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.email-list-content .email-row:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.email-list-content .email-row:last-child::after {
    display: none; /* No separator after last row */
}

.email-list-content .email-row:only-child {
    border-radius: 6px;
}

.email-row-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.email-row-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.email-row-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E3E3E3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

.email-row-details {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.email-row-name {
    font-weight: 600;
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    text-align: left;
}

.email-row-separator {
    color: #999;
    font-size: 14px;
}

.email-row-email {
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-row-email-only {
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Delete button */
.email-row-delete {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: 8px;
}

.email-row-delete .delete-icon {
    display: block;
    width: 14px;
    height: 14px;
    background: url(../img/ic-delete-pink.svg?v=9f43cd41569a) center no-repeat;
    background-size: contain;
    transition: transform 0.2s ease;
}

.email-row-delete:hover .delete-icon {
    transform: rotate(90deg);
}

.email-row-delete:hover svg {
    transform: rotate(90deg);
}

/* Squad invite modal - congratulations page (Page 0) */
/* .squad-invite-congrats {
    padding: 40px 20px;
} */

.squad-invite-congrats h2 {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

.squad-invite-congrats p {
    margin-bottom: 32px;
}

/* Create Invite Button */
.btn-create-invite {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.btn-create-invite:hover {
    background: #fff;
    color: #000;
}

/* Loading State */
.invite-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 16px;
}

.invite-loading-state .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e9ecef;
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.invite-loading-state span {
    color: #636e72;
    font-size: 14px;
}

/* View Guests Actions */
.view-guests-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.view-guests-actions .btn-m {
    flex: 1;
}

/* Mobile Responsiveness */
@media (max-width: 560px) {
    .invite-modal {
        padding: 10px;
    }
    
    .invite-modal-content {
        margin-top: 20px;
        border-width: 3px;
        box-shadow: -1px 1px 0 #000, -2px 2px 0 #000, -3px 3px 0 #000, -4px 4px 0 #000;
    }
    
    .invite-modal-header {
        padding: 16px 18px 0px 24px;
    }
    
    
    .upldbox {
        padding: 20px 16px;
    }
    
    .email-row-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .email-row-separator {
        display: none;
    }
    
    .view-guests-actions {
        flex-direction: column;
    }
}

/* =============================================================================
   INVITE MODAL - PAGE 2: COMPOSE MESSAGE
   ============================================================================= */

/* Field Group Container */
.invite-field-group {
    position: relative;
    margin-bottom: 14px;
}

/* Read-only Subject Line Field */
.invite-field-readonly {
    width: 100%;
    padding: 12px 14px 28px 14px;
    border: 2px solid #000;
    border-radius: 8px;
    background: #fff;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    cursor: default;
    text-align: left;
}

/* Field Label (appears below field content) */
.invite-field-label {
    display: block;
    margin-top: -24px;
    margin-left: 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Custom Message Textarea */
.invite-custom-message {
    width: 100%;
    padding: 12px 14px 28px 14px;
    border: 2px solid #000;
    border-radius: 8px;
    background: #fff;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.15s ease;
}

.invite-custom-message:focus {
    outline: none;
    border-color: #b5ff75;
}

.invite-custom-message::placeholder {
    color: #999;
}

/* RSVP Preview Text */
.invite-rsvp-preview {
    margin-bottom: 20px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    word-break: break-all;
    text-align: left;
}

.invite-rsvp-preview a {
    color: #0066cc;
    text-decoration: none;
}

.invite-rsvp-preview a:hover {
    text-decoration: underline;
}

/* Send Invites Button */
.btn-send-invites {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.btn-send-invites:hover {
    background: #fff;
    color: #000;
}

.btn-send-invites:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-send-invites:disabled:hover {
    background: #000;
    color: #fff;
}

/* =============================================================================
INVITE SUCCESS BANNER
============================================================================= */

.invite-success-banner {
    position: fixed;
    z-index: 10001;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 520px;
    padding: 14px 22px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    background: #AAFB79;
    border: 2px solid #49FB00;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
.invite-success-banner.slide-out {
    transform: translate(-50%, calc(-100% - 20px));
    opacity: 0;
}
.invite-success-banner.info {
    background: #FFF3CD;
    border-color: #FFCA2C;
    color: #000000;
}
.invite-success-banner.warning {
    background: #FEE2E2;
    border-color: #F87171;
    color: #991B1B;
}

/* =============================================================================
EMAIL RUSH SCORE DISPLAY
============================================================================= */

.email-rush-score {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 16px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: opacity 3s ease-out;
    opacity: 1;
}
.email-rush-score .score-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.email-rush-score .score-settings-link {
    color: #dedede;
    text-decoration: underline;
    font-size: 10px;
}

.email-rush-score.fade-out {
    opacity: 0;
    pointer-events: none;
}

.email-rush-score .score-current {
    color: #fff;
}

.email-rush-score .score-separator {
    color: rgba(255, 255, 255, 0.4);
}

.email-rush-score .score-high {
    color: rgba(255, 255, 255, 0.7);
}

.email-rush-score .score-high.new-high {
    color: #AAFB79;
    text-shadow: 0 0 8px rgba(170, 251, 121, 0.5);
}

/* Pulse animation on score increase */
.email-rush-score.pulse {
    animation: score-pulse 0.3s ease-out;
}

@keyframes score-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

/* Mobile adjustment */
@media (max-width: 560px) {
    .email-rush-score {
        bottom: 15px;
        right: 15px;
        padding: 10px 16px;
        font-size: 14px;
    }
}


/* Recent guests loading state */
.recent-guests-loading {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}


.squad-bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.squad-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   MY EVENTS PAGE STYLES
   ========================================================================== */

/* Tab Content */
.my-events-tab-content {
    display: none !important;
}
.my-events-tab-content.active {
    display: block !important;
}

/* Multi-day event tables */

.timezone-info {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 4px;
}

/* Empty State */
.my-events-empty {
    text-align: center;
    padding: 60px 20px;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

/* Confirmation Modal */
.my-events-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.my-events-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}
.my-events-modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.my-events-modal-overlay.show .my-events-modal {
    transform: scale(1);
}
.my-events-modal-title {
    font-family: 'Figtree', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #000;
}
.my-events-modal-text {
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #333;
    margin-bottom: 24px;
}
.my-events-modal-actions {
    display: flex;
    gap: 12px;
}
.my-events-modal-btn {
    flex: 1;
    padding: 12px 24px;
    border: 2px solid #000;
    border-radius: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.my-events-modal-btn-confirm {
    background: #FF34B9;
    color: #fff;
}
.my-events-modal-btn-confirm:hover {
    background: #E02A9F;
}
.my-events-modal-btn-cancel {
    background: #fff;
    color: #000;
}
.my-events-modal-btn-cancel:hover {
    background: #f5f5f5;
}

/* Toast Notification */
.my-events-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #5DF900;
    color: #000;
    padding: 16px 24px;
    border-radius: 8px;
    border: 2px solid #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    z-index: 10001;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.my-events-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.my-events-toast.error {
    background: #FF34B9;
    color: #fff;
}

/* Tab containers - maintains consistent height during lazy load */
#my-events-hosting-content,
#attending-events-container {
    min-height: 30vh;
}

/* Loading State */
.my-events-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 20px;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    gap: 12px;
}
.my-events-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #000;
    border-radius: 50%;
    animation: my-events-spin 0.8s linear infinite;
}
@keyframes my-events-spin {
    to { transform: rotate(360deg); }
}
.my-events-error {
    text-align: center;
    padding: 60px 20px;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}

/* New badge */
.new-badge {
    display: inline-block;
    background: #FF34B9;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 12px;
    vertical-align: middle;
}

/* Hosted by text */
.hosted-by-text {
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    margin: -8px 0 16px 0;
    font-style: italic;
    text-align: left;
}


/* ==========================================================================
   MY SQUADS PAGE STYLES
   ========================================================================== */

/* Content container */
.my-squads-content {
    min-height: 30vh;
}

/* Loading State */
.my-squads-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 20px;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    gap: 12px;
}
.my-squads-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #000;
    border-radius: 50%;
    animation: my-squads-spin 0.8s linear infinite;
}
@keyframes my-squads-spin {
    to { transform: rotate(360deg); }
}

/* Error State */
.my-squads-error {
    text-align: center;
    padding: 60px 20px;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}


/* Squad Cards (extends .info-contain.morat) */
.squad-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-align: left;
}
.squad-card:hover {
    opacity: 0.85;
}
.squad-card .hboxtop {
    margin-bottom: 4px;
    text-align: left;
}


/* Empty State: CTA Box (for users who can create squads) */
.my-squads-empty-cta {
    margin-top: 20px;
}
.my-squads-cta-box {
    background: #fff;
    padding: 40px;
    border: 2px solid #000;
}
.my-squads-cta-box h3 {
    margin: 0 0 15px 0;
}
.my-squads-cta-box h2 {
    margin: 0 0 25px 0;
    font-weight: 400;
}

/* Empty State: Message (for users who cannot create squads) */
.my-squads-empty-message {
    background: #fff;
    padding: 40px;
    border: 2px solid #000;
    text-align: center;
    margin-top: 20px;
}

.my-squads-empty-message h3 {
    margin: 0 0 15px 0;
}
.my-squads-empty-message h2 {
    margin: 0 0 0 0;
    font-weight: 400;
}


/* Create Squad Button (shown below list when user has squads) */
.my-squads-create-btn {
    margin-top: 30px;
    text-align: center;
}

/* ============================================================
   Squad Name Validation
   ============================================================ */

.squad-name-validation-container {
    position: relative;
}

.squad-name-checkmark {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.squad-name-error {
    display: block;
    color: #e53935;
    font-size: 15px;
    /* margin-top: 4px; */
    margin-bottom: 12px;
    text-align: right;
}

/* Input state for validation error */
input.input-error {
    border-color: #e53935;
}



/* ============================================
   SQUAD LOCATION PICKER
   ============================================ */

#squad-location-picker {
    position: relative;
    width: 100%;
}

#squad-location-picker .squad-location-input {
    width: 100%;
}

/* Dropdown panel */
.squad-location-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #b5ff75;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    max-height: 280px;
    overflow-y: auto;
}

#squad-location-picker .squad-location-input:focus {
    border-color: #b5ff75;
    outline: none;
}

#squad-location-picker.is-open .squad-location-input {
    border-color: #b5ff75;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Dropdown options - shared styles */
.squad-location-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #eee;
}

.squad-location-option:last-child {
    border-bottom: none;
}

.squad-location-option:hover,
.squad-location-option.selected {
    background-color: #f5f5f5;
}

.squad-location-option-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.squad-location-option-icon svg {
    display: block;
}

.squad-location-option-text {
    flex: 1;
    font-size: 14px;
    color: #333;
    text-align: left;
}

/* Global option - slightly emphasized */
.squad-location-global {
    background-color: #f8f9fa;
}

.squad-location-global:hover,
.squad-location-global.selected {
    background-color: #e9ecef;
}

/* Use custom option */
.squad-location-use-custom {
    background-color: #fff;
    border-top: 1px solid #ddd;
}

.squad-location-use-custom .squad-location-option-text {
    color: #333;
}

.squad-location-custom-text {
    font-weight: 500;
    color: #333;
}

/* Results section */
.squad-location-results:empty {
    display: none;
}

/* Validation error state */
#squad-location-picker .squad-location-input.input-error {
    border-color: #ff34b7;
}


/* ============================================================
   SQUAD FORM ERROR STYLES
   ============================================================ */

/* General error banner at top of form */
.form-error-banner {
    background-color: #fee2e2;
    border: 1px solid #ef4444;
    color: #b91c1c;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

/* Field-level error message */
.field-error-message {
    display: block;
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.4;
}

/* Location picker error (matches squad-name-error style) */
.squad-location-error {
    display: block;
    color: #ef4444;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.4;
    text-align: right;
}

/* Input error state */
.input-error {
    border-color: #ef4444 !important;
}

/* Select/dropdown error state */
select.input-error {
    border-color: #ef4444 !important;
}

/* Textarea error state */
textarea.input-error {
    border-color: #ef4444 !important;
}


/* Button submitting/loading state */
.btn-submitting {
    cursor: not-allowed !important;
}


/* ===================================
   Squad Form - Close Squad Section
   =================================== */
.evntcancel {
    margin-top: 30px;
    text-align: left;
}

/* Squad form - extra spacing before close section */
#squadForm .evntcancel {
    margin-top: 80px;
}

.evntcancel h2 {
    margin-bottom: 5px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    text-align: left;
}

.evntcancel p {
    margin-bottom: 11px;
    font-size: 16px;
    line-height: 21px;
    text-align: left;
}


/* Close Squad Modal */
#closeSquadModal {
    z-index: 10001;
}

#closeSquadModal p {
    text-align: left;
}

#closeSquadModal .btn-danger {
    background: #FF3B30 !important;
    color: white !important;
    border: 2px solid #000 !important;
}

#closeSquadModal .btn-danger:hover {
    background: #E02A1F !important;
    border: 2px solid #E02A1F !important;
}


/* Squad form background color - prevents white flash while bg image loads (edit mode with existing image only) */
body.squad-form-has-image,
body.squad-main-has-image {
    background-color: #1a1a1a;
}


/* ============================================
   Squad Main Page - Button Area & Modals
   ============================================ */

/* Button area layout */
.squad-button-area {
    margin-top: 33px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}


/* Squad modals */
.squad-modal {
    position: relative;
    max-width: 400px;
}

.squad-modal .modal-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.squad-modal .modal-close-btn:hover {
    color: #333;
}

.squad-modal h4 {
    padding-right: 30px; /* Space for close button */
    text-align: left;
    color: #000 !important;
}

.squad-modal p {
    text-align: left;
    color: #000 !important;
}

.squad-modal .confirm-actions {
    justify-content: flex-start;
}


/* Squad member initials avatar (fallback when no profile image) */
.member-avatar-initials {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
}
/* Override size when combined with manager/member pfp classes */
.mngpfp.member-avatar-initials,
.membspfp.member-avatar-initials {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 15px;
}

.squad-member-error,
.squad-member-empty {
    font-size: 13px;
    color: #000;
    padding: 8px 0;
    text-align: left;
}

/* .squad-member-loading {
    padding-top: 2px;
} */

.squad-member-more {
    font-size: 14px;
    color: #000;
    padding: 8px 0 0 0;
    font-weight: 500;
    text-align: left;
}


/* ============================================
   SQUAD VIEW MEMBERS MODAL
   Extends .invite-modal styles
   ============================================ */

/* Manage Members modal buttons */
.manage-members-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Wider content area for member list */
.view-members-content {
    max-width: 600px;
    width: 95%;
}

/* Search and filter controls */
.view-members-controls {
    margin-bottom: 16px;
}

.view-members-search {
    margin-bottom: 12px;
}

.view-members-search-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: 'Wix Madefor Text', sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.view-members-search-input:focus {
    outline: none;
    border-color: #000;
}

.view-members-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.view-members-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-family: 'Wix Madefor Text', sans-serif;
    cursor: pointer;
    user-select: none;
}

.view-members-filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* List container height constraint */
.view-members-list-container {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    display: block;
}

/* Loading state */
.view-members-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
    font-size: 14px;
    gap: 12px;
}

/* Empty state */
.view-members-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
    font-size: 14px;
}

/* Member row status badge */
.member-status-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    white-space: nowrap;
}

.member-status-badge.status-invited {
    background-color: #e3f2fd;
    color: #1565c0;
}

.member-status-badge.status-requested {
    background-color: #fff3e0;
    color: #e65100;
}

.member-status-badge.status-banned,
.member-status-badge.status-denied {
    background-color: #ffebee;
    color: #c62828;
}

.member-status-date {
    font-size: 11px;
    color: #999;
}

/* Member row action buttons */
.member-row-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.member-row-actions button {
    padding: 4px 10px;
    font-size: 12px;
    font-family: 'Wix Madefor Text', sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.member-row-actions button:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.member-row-actions button.btn-approve {
    background-color: #FFFFFF;
    border-color: #81c784;
    color: #2e7d32;
}

.member-row-actions button.btn-approve:hover {
    background-color: #c8e6c9;
}

.member-row-actions button.btn-deny {
    color: #c62828;
}

.member-row-actions button.btn-deny:hover {
    background-color: #ffebee;
    border-color: #ef9a9a;
}

.member-row-actions button.btn-deny.confirm-deny {
    background-color: #c62828;
    border-color: #c62828;
    color: #fff;
}

.member-row-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pagination controls */
.view-members-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    margin-top: 16px;
}

.view-members-page-info {
    font-size: 13px;
    font-family: 'Wix Madefor Text', sans-serif;
    color: #666;
    min-width: 100px;
    text-align: center;
}

/* Manager tools section in members box */
.squad-member-tools {
    margin-top: 16px;
    /* padding-top: 12px; */
    /* border-top: 1px solid #eee; */
}

.squad-member-tools .btn-m + .btn-m {
    margin-top: 5px;
}

.squad-view-members-btn .request-badge {
    color: #e65100;
    font-weight: 600;
}

/* Edit Member Modal extensions */
#editMemberModal {
    z-index: 10002;
}

.edit-member-modal {
    min-width: 350px;
}

.edit-member-info {
    display: flex;
    align-items: center;
    gap: 0px;
    padding-top: 0px;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    padding-bottom: 10px;
}

.edit-member-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.edit-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-member-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 5px;
    text-align: left !important;
}




.edit-member-date {
    font-size: 12px;
    color: #999;
    font-family: 'Wix Madefor Text', sans-serif;
    text-align: left;
}


/* ============================================
   VIEW MEMBERS MODAL - TEXT WRAPPING OVERRIDES
   ============================================ */

/* Allow rows to expand in height for wrapped content */
.view-members-list-container .email-row {
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    padding: 10px 12px;
    align-items: flex-start;
}

/* Allow details to wrap to multiple lines */
.view-members-list-container .email-row-info {
    overflow: visible;
    flex-wrap: wrap;
    align-items: flex-start;
}

.view-members-list-container .email-row-details {
    flex-wrap: wrap;
    row-gap: 2px;
    align-items: flex-start;
}

/* Allow text to wrap instead of truncating */
.view-members-list-container .email-row-name {
    white-space: normal;
    word-break: break-word;
    text-align: left;
}

.view-members-list-container .email-row-email {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
    text-align: left;
}

.view-members-list-container .email-row-details {
    text-align: left;
    justify-content: flex-start;
}

.view-members-list-container .member-status-date {
    display: inline;
    text-align: left;
}

/* Keep action buttons on the right, aligned to top when row expands */
.view-members-list-container .member-row-actions {
    align-self: flex-start;
    margin-top: 2px;
}

/* ============================================
   VIEW MEMBERS MODAL - SEARCH INPUT SPINNER
   ============================================ */

/* Wrapper for search input with spinner */
.view-members-search {
    position: relative;
}

.view-members-search-input {
    padding-right: 36px; /* Make room for spinner */
}

/* Spinner inside search input */
.view-members-search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top-color: #666;
    border-radius: 50%;
    animation: searchSpinner 0.6s linear infinite;
    display: none; /* Hidden by default, shown via JS */
}

.view-members-search-spinner.visible {
    display: block;
}

@keyframes searchSpinner {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ============================================
   VIEW MEMBERS MODAL - REFRESH BUTTON
   ============================================ */

.view-members-refresh-btn {
    padding: 4px 10px;
    font-size: 12px;
    font-family: 'Wix Madefor Text', sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    margin-left: auto;
    display: none; /* Hidden by default */
}

.view-members-refresh-btn:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.view-members-refresh-btn.visible {
    display: inline-block;
}

/* Approved/Denied status text in actions area */
.member-row-actions .status-text {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
}

.member-row-actions .status-text.status-approved {
    color: #2e7d32;
}

.member-row-actions .status-text.status-denied {
    color: #c62828;
}

/* Hide separator for requested status (badge already indicates status) */
.view-members-list-container .email-row[data-member-status="requested"] .email-row-separator {
    display: none;
}

/* ============================================
   EDIT MEMBER MODAL - VIEWS AND CONFIRMATIONS
   ============================================ */

/* View container - only one visible at a time */
.edit-member-view {
    text-align: left;
}

.edit-member-view h4 {
    margin-bottom: 8px;
}

.edit-member-view p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Hint text in confirmations */
.edit-member-hint {
    font-size: 13px !important;
    color: #666 !important;
    font-style: italic;
}

/* Action buttons in edit modal - ensure proper layout */
.edit-member-modal .confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-start;
}

.edit-member-modal .confirm-actions button {
    min-width: 70px;
}

/* Danger button variant - for ban, cancel invite */
.edit-member-modal .btn-danger {
    background-color: #c62828;
    border-color: #c62828;
    color: #fff;
}

.edit-member-modal .btn-danger:hover {
    background-color: #b71c1c;
    border-color: #b71c1c;
}

.edit-member-modal .btn-danger:disabled {
    background-color: #e57373;
    border-color: #e57373;
}

/* Regular confirm button */
.edit-member-modal .btn-confirm:not(.btn-danger) {
    background-color: #fff;
    border-color: #333;
    color: #333;
}

.edit-member-modal .btn-confirm:not(.btn-danger):hover {
    background-color: #f5f5f5;
}

.edit-member-modal .btn-confirm:not(.btn-danger):disabled {
    opacity: 0.5;
}

/* Ensure proper z-index stacking */
#editMemberModal {
    z-index: 10002;
}

#editManagerModal {
    z-index: 10002;
}

#editManagersListModal {
    z-index: 10001;
}


/* Ensure initials avatar matches image avatar size */
.email-row-avatar.member-avatar-initials {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}


/* ============================================
   Squad Managers Section
   ============================================ */

/* Creator badge */
.manager-creator-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: #e8e8e8;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 0px;
    vertical-align: middle;
    text-align: left !important;
}


/* Clickable manager rows */
.manager-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.manager-row-clickable:hover {
    background-color: #f5f5f5;
}

/* Permission toggles in edit modal */
.manager-permissions-section {
    margin: 0px 0;
}

.manager-permissions-label {
    /* font-weight: 600; */
    font-family: 'Wix Madefor Text', sans-serif;
    margin-bottom: 0px !important;
    padding-bottom: 20px !important;
    padding-top: 10px;
    font-size: 14px;
}

.permission-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    /* border-bottom: 1px solid #eee; */
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.permission-toggle-row:last-child {
    border-bottom: none;
}

.permission-toggle-text {
    font-size: 14px;
    flex: 1;
    padding-right: 0px;
    min-width: 0;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding: 7px 0;
    margin-right: 12px;
    font-family: 'Wix Madefor Text', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.manager-permissions-section {
    width: 100%;
    overflow-x: hidden;
}

.permission-toggle-input {
    display: none;
}

.permission-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.permission-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.permission-toggle-input:checked + .permission-toggle-switch {
    background: #5DF900;
}

.permission-toggle-input:checked + .permission-toggle-switch::after {
    transform: translateX(20px);
}

/* Toggle loading spinner */
.permission-toggle-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: toggle-spin 0.6s linear infinite;
    margin-left: 8px;
    flex-shrink: 0;
    visibility: hidden;
}

.permission-toggle-spinner.visible {
    visibility: visible;
}

.permission-toggle-row.saving {
    pointer-events: none;
}

@keyframes toggle-spin {
    to { transform: rotate(360deg); }
}

/* Edit manager modal actions spacing */
.edit-manager-modal {
    max-width: 420px;
    width: 90%;
}

.edit-manager-modal .edit-member-view {
    display: flex;
    flex-direction: column;
}

.edit-manager-modal .manager-permissions-section {
    overflow-y: auto;
}

.edit-manager-modal .confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-top: 20px;
    position: relative;
}

.edit-manager-modal .confirm-actions button {
    position: relative;
}

/* Squad Events Empty State */
.squad-events-empty-box {
    background: #fff;
    border: 4px solid #000;
    padding: 16px;
    text-align: left;
}

.squad-events-empty-text {
    font-family: 'Wix Madefor Text', sans-serif;
    font-size: 14px;
    margin-bottom: 0px;
    margin-top: 5px;
    text-align: left;
}

/* Squad Events Private Notice */
.squad-events-private-notice {
    background: #fff;
    border: 4px solid #000;
    border-radius: 0;
    padding: 16px;
    margin-bottom: 8px;
    text-align: left;
}

.squad-events-private-notice .squad-section-title {
    margin: 0;
}


.squad-events-empty-action {
    margin-top: 10px;
    margin-bottom: 0px;
    text-align: left;
}


/* Squad Events Loading Placeholder */
.squad-events-loading-box,
#eventsLoadMore:not(:empty) {
    background: #fff;
    border: 4px solid #000;
    border-radius: 0;
    height: 50px;
    margin-bottom: 8px;
    animation: eventsLoadingPulse 1s ease-in-out infinite;
}

/* Infinite scroll trigger - minimal height when idle */
#eventsLoadMore {
    height: 20px;
}

/* #################################################### */
/* Skeletons                                            */
/* #################################################### */


@keyframes eventsLoadingPulse {
    0%, 100% {
        opacity: 0.07;
    }
    50% {
        opacity: 0.12;
    }
}

/* My Squads Loading Placeholder */
.squad-loading-placeholder {
    min-height: 82px;
    animation: squadsLoadingPulse 1s ease-in-out infinite;
}

.squad-skeleton-title {
    height: 22px;
    background: #d0d0d0;
    border-radius: 4px;
    margin-bottom: 4px;
    width: 65%;
}

.squad-skeleton-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.squad-skeleton-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d0d0d0;
    flex-shrink: 0;
}

.squad-skeleton-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.squad-skeleton-line {
    height: 16px;
    background: #d0d0d0;
    border-radius: 4px;
    width: 130px;
}

.squad-skeleton-line-short {
    width: 90px;
}

@keyframes squadsLoadingPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
}
/* Event Card Links (title and ticket text) */
.event-card-link {
    color: inherit;
    text-decoration: none;
}

.event-card-link:hover {
    text-decoration: underline;
}


/* Squad Skeleton Loading States */
.squad-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    height: 44px;
    box-sizing: border-box;
}

.squad-skeleton-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background-color: #e0e0e0;
    animation: skeletonPulse 1.2s ease-in-out infinite;
}

.squad-skeleton-text {
    height: 14px;
    width: 80px;
    border-radius: 4px;
    background-color: #e0e0e0;
    animation: skeletonPulse 1.2s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Ticket Types Loading Skeleton */

.ticket-skeleton-bar {
    height: 12px;
    background: #d0d0d0;
    border-radius: 4px;
    width: 70%;
    margin-top: 8px;
    margin-bottom: 5px;
    animation: skeletonPulse 1.2s ease-in-out infinite;
}

.ticket-skeleton-bar-short {
    width: 40%;
    animation-delay: 0.1s;
}


/* Squad Blast Modal - subject line spacing */
#squadBlastModal .frm-lbl-grp {
    margin-bottom: 10px;
}

/* Squad Blast Modal - title underline */
#squadBlastModal .invite-title-main {
    text-decoration: underline;
}

/* Squad Blast Modal - limit reached message */
.squad-blast-limit-reached-msg {
    word-break:normal !important;
}

/* Squad Blast Modal - clickable title easter egg */
.squad-blast-title-clickable {
    cursor: pointer;
    display: inline-block;
    user-select: none;
}

.squad-blast-title-clickable.shaking {
    animation: blastTitleShake 0.3s ease-out;
}

@keyframes blastTitleShake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-4px) rotate(-1deg); }
    30% { transform: translateX(3px) rotate(1deg); }
    45% { transform: translateX(-3px) rotate(-0.5deg); }
    60% { transform: translateX(2px) rotate(0.5deg); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}



/* ============================================================
   EVENT SQUADS SECTION (Manage Event Page)
   ============================================================ */

#eventSquadsSection .section-header-row {
    min-height: 43px;
}

.event-squads-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.event-squad-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    background: #ffffff;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

.event-squad-item.hover-active {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.event-squad-item a {
    color: #000;
    text-decoration: none;
}

.event-squad-item.hover-active a {
    transition: color 0.2s ease;
}

/* Stretch link to cover entire item */
.event-squad-item a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.event-squad-item:hover {
    background: #000;
}

.event-squad-item:hover a {
    color: #fff;
}

/* Red background when hovering delete button */
.event-squad-item:has(.remove-squad-btn:hover) {
    background: #e00;
    border-color: #e00;
}

.event-squad-item:has(.remove-squad-btn:hover) a {
    color: #fff;
}

.event-squad-item:has(.remove-squad-btn:hover) .delete-icon {
    background-color: #fff;
}

/* Delete button - uses mask for color control */
.event-squad-item .remove-squad-btn {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.event-squad-item .remove-squad-btn .delete-icon {
    display: block;
    width: 12px;
    height: 12px;
    background-color: #f32dae;
    -webkit-mask-image: url(../img/ic-delete-white.svg?v=0ddaaa421c3f);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url(../img/ic-delete-white.svg?v=0ddaaa421c3f);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.event-squad-item .remove-squad-btn:hover .delete-icon {
    transform: rotate(90deg);
}

/* Button wrapper for dropdown positioning */
.add-squad-btn-wrapper {
    position: relative;
}

.add-squad-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    z-index: 100;
}

.add-squad-dropdown-content {
    background: #fff;
    border: 2px solid #000;
    border-radius: 4px;
    min-width: 220px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.add-squad-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    background: #fff;
    position: relative;
}

/* Separator lines - inset from edges */
.add-squad-dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: #000;
}

.add-squad-dropdown-item:last-child::after {
    display: none;
}

.add-squad-dropdown-item:hover {
    background: #000;
}

/* Extend separators full width around hovered item */
.add-squad-dropdown-item:hover::after,
.add-squad-dropdown-item:has(+ .add-squad-dropdown-item:hover)::after {
    left: 0;
    right: 0;
}

.add-squad-dropdown-item:hover .squad-name,
.add-squad-dropdown-item:hover .squad-add-icon {
    color: #fff;
}

.add-squad-dropdown-item .squad-name {
    text-align: left;
    flex: 1;
    transition: color 0.15s ease;
}

.add-squad-dropdown-item .squad-add-icon {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-left: 12px;
    transition: color 0.15s ease;
}

.add-squad-dropdown-item.disabled {
    color: #999;
    cursor: default;
}

.add-squad-dropdown-item.disabled:hover {
    background: transparent;
}

.add-squad-dropdown-item.disabled .squad-add-icon {
    display: none;
}

.add-squad-dropdown-empty {
    padding: 12px;
    color: #000;
    font-size: 14px;
    text-align: center;
    /* transition: background-color 0.15s ease, color 0.15s ease; */
}

.add-squad-dropdown-empty:hover {
    background: #000;
    color: #fff;
}

.event-squads-empty,
.event-squads-no-access {
    color: #000;
}


/* ---- Toast popup (fixed-position overlay, used by manage event page) ---- */
.toast-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 24px;
    border-radius: 8px;
    border: 2px solid #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    font-weight: 600;
    z-index: 10001;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.toast-popup.toast-success {
    background: #5DF900;
    color: #000;
}
.toast-popup.toast-error {
    background: #FF34B9;
    color: #fff;
}


/* Leave Event Team button cooldown animation */
.btn-fs.cooldown {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Host invite accept/decline row — align btn-m text vertically with btn-fs */
.host-invite-actions .btn-m {
    align-items: center;
}

/* Leave Event Team warning text styling */
#teamLeaveWarning {
    text-align: center;
    margin-top: 5px;

}

/* Detail change hint (edit mode) */
.detail-change-hint {
    display: block;
    margin-bottom: 10px;
    padding: 10px 20px 14px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: #c49f14;
    background: #fcfcbd;
    border: 2px solid #f7f732;
}


/* ================================================================
   REGISTRATION PAGE — STATE GATING

   Wrapper-based visibility gating. Each gated-* class is a thin
   wrapper whose sole job is to show/hide its children based on
   state classes set on <html> by the first-paint script in
   register.html. The state-class taxonomy and lifecycle are
   documented in registration_state.js.

   Inner content elements should never carry visibility gating
   classes themselves, unless that logic is distinct from the state class system. 
   The invariant is ensuring the state based visibility logic 
   is fully disentangled from any other visibility logic where possible.
   ================================================================ */

/* Show when user has tickets (authed-registered OR guest with cached tickets). */
.gated-user-has-tickets { display: none; }
html.user-has-tickets .gated-user-has-tickets { display: revert; }

/* Show when user does NOT have tickets. */
.gated-not-user-has-tickets { display: revert; }
html.user-has-tickets .gated-not-user-has-tickets { display: none; }


/* My Tickets button: show if authed-registered, or if user has tickets and
   the tickets-button-revealed threshold (window.start) has been reached.
   Uses display: contents so the wrapper is layout-transparent — the button
   inside inherits its parent's flex-child semantics. */
.gated-my-tickets { display: none; }
html.registered-yes .gated-my-tickets { display: contents; }
html.user-has-tickets.tickets-button-revealed .gated-my-tickets { display: contents; }

/* Email verify banner: guest users with tickets, outside event window OR
   after scan-in. Hidden inside event window to avoid door-line auth attempts
   on flaky networks. */
.gated-email-verify { display: none; }
html.auth-no.has-guest-tickets:not(.event-window-open) .gated-email-verify { display: block; }
html.auth-no.has-guest-tickets.has-been-scanned-in .gated-email-verify { display: block; }

/* Get More Tickets button: toggled by registration_state.js at runtime
   based on cached guest ticket counts vs per-type availability. Separate
   from the gated-* state system — this is runtime JS state, not server-
   initial state. */
#getAdditionalTicketsBtn.purchasable-uncertain { display: none; }
#getAdditionalTicketsBtn.fade-in {
    animation: getMoreTicketsFadeIn 300ms ease-out;
}

@keyframes getMoreTicketsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


.cause-form.hboxtop {
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

p.finetxt {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Figtree', Helvetica, Arial, sans-serif;
    color: #666;
    line-height: 20px;
}

p.finetxt a {
    color: #000;
    font-weight: 600;
}

a.link {
    color: #000;
    text-decoration: underline;
}

a.link:hover {
    color: #31bfbf;
}

a.link:active {
    color: #46b900;
}


#causeForm .upload-tile {
    background-image: linear-gradient(135deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.04) 50%,
        rgba(0, 0, 0, 0.10) 100%);
}

#causeForm .upload-section {
    margin-bottom: 6px;
}

#causeForm #submitButton {
    margin-top: 14px;
}


#connections-skeleton.is-loaded {
    display: none;
}

@media (min-width: 700px) {
    body.referrals .d-col2.po-box-contain {
        flex-wrap: wrap;
    }
    body.referrals .d-col2.po-box-contain > .flsbox {
        flex: 1 1 0;
        min-width: 0;
    }
    body.referrals .d-col2.po-box-contain > .connections-card {
        flex-basis: 100%;
    }
}