@charset "utf-8";
/* Title: Nice Industries Party Time Components
** Description: Modular reusable components for Nice Industries Party Time
** Author: Jessica Greenwalt
** Created: 10-22-2025
** Updated: 05-15-2026
************************************** */

/* = Text Elements
** ----------------------- */
.line-txt {
    display: flex;
    width: 100%;
    align-items: center;
}

.line-txt .line {
    flex: 1 1 0;
    height: 2px;
    text-indent: -9999px;
    background: rgba(0, 0, 0, 0.2);
}

.line-txt .txt {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: 18px;
}

/* = Header
** ----------------------- */
header {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 999;
    width: 100%;
    padding: 15px 12px 15px 16px;
    transition: top 0.3s ease-out;
    pointer-events: none;
}

header .va {
    display: flex;
    float: left;
    align-items: center;
    pointer-events: auto;
}

/* = Navigation
** ----------------------- */

header .nice-logo {
    display: inline-block;
    width: 122px;
    height: 34px;
    background: url(../img/logo-nice-pass.png?v=149453c74e3e) center no-repeat;
    background-size: contain;
}

header .nav {
    display: flex;
    gap: 8px;
    float: right;
    align-items: center;
    margin-top: -8px;
    height: 40px;
    /* margin-right: 5px; */
    pointer-events: auto;
}

header .nav a {
    text-decoration: none;
    font-weight: 600;
    color: #000;
    font-size: 15px;
}

header .auth-profile-wrapper {
    margin-left: -4px;
}

header .auth-profile-button {
    position: relative;
    top: 3px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    border: 2px solid #000;
    transition: border-color 0.2s ease;
}

header .auth-profile-button:hover {
    border-color: #000;
}

header .auth-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header .auth-profile-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.navtabs {
    margin: 0 12px 0 25px;
    text-align: left;
}

.tab {
    position: relative;
    bottom: -9px;
    margin-right: 4px;
    font-weight: 600;
    padding: 7px 15px 8px 15px;
    border: 4px solid #000;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    color: #000;
    background: #dbdbdb;
    box-shadow:
    -1px 1px 0 #000,
    -2px 2px 0 #000,
    -3px 3px 0 #000,
    -4px 4px 0 #000;
}

.tab:hover {
    background: #fff;
}

.tab.active {
    margin-left: 5px;
    bottom: -4px;
    background: #fff;
    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,
    -8px 8px 0 #000,
    -9px 9px 0 #000,
    -10px 10px 0 #000,
    -11px 11px 0 #000,
    -12px 12px 0 #000,
    -13px 13px 0 #000;
}

.tab.active:nth-child(1) {
    margin-left: 0;
}

.tab.active:after {
    z-index: 100;
    position: absolute;
    left: 0;
    bottom: -8px;
    content: " ";
    width: calc(100% - 8px);
    background: #fff;
    border: 4px solid #fff;
}

.share-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 4px 4px 4px 12px;
    border: 2px solid #000;
    border-radius: 8px;
    font-size: 17px;
}

.share-link .link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-link:hover {
    border: 2px solid #41FFFF;
}

.share-link:active,
.share-link:focus {
    border: 2px solid #5DF900;
}


.share-link .btn {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 10px 14px 12px 14px;
    color: #fff;
    background: #000;
    border: 2px solid #000;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.share-link + .btn-m {
    margin-top: 5px;
  }

/* Management Controls */
.mngnav {
    display: flex;
    margin: 0 10px 8px 10px;
    gap: 6px;
    flex-direction: column;
}

.mngnav .row > .btn-icn,
.mngnav .row > .btn-m {
    flex: 1;
    display: flex;        /* or block, depending on your existing styles */
    justify-content: center;
  }

/* Info Containers */
.info-contain {
    display: block;
    margin-bottom: 6px;
    border-radius: 4px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.4);
}

.flsbox .info-contain {
    border: 2px solid #000;
}

.info-contain .sh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px 4px;
}

/* List Container */
.lstcontnr {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* List Container Table */
table.lstcontnr {
    width: 100%;
    border-collapse: collapse;
}

/* List Container Header */
.lch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    padding: 5px 5px 5px 10px;
    color: rgba(0, 0, 0, 0.6);
}

/* List Container Header Table */
table.lstcontnr th {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 5px 5px 10px;
    text-align: left;
    font-size: 14px;
    font-weight: 550;
    color: rgba(0, 0, 0, 0.6);
}

/* List Row */
.lstcontnr .row {
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

table.lstcontnr tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

table.lstcontnr tr td {
    padding: 8px 10px;
    vertical-align: middle;
    text-align: left;
}

table.recent-registrations-table tbody tr:hover {
    background: rgba(93, 247, 0, 0.1);
}

table .user {
    display: flex;
    gap: 6px;
    align-items: center;
}

table.recent-registrations-table .no-recent-cell {
    text-align: center;
}

table.recent-registrations-table .recent-reg-paid-cell,
table.recent-registrations-table .recent-reg-date-cell {
    white-space: nowrap;
    vertical-align: middle;
}

/* Event team table (manage page) */
table.event-team-table tbody tr.row:hover {
    background: rgba(93, 247, 0, 0.1);
}

table.event-team-table tr.row td {
    vertical-align: middle;
}

table.event-team-table tr.row {
    padding: 0;
}

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

.lstcontnr .row:hover {
    background: rgba(93, 247, 0, 0.1);
}

.lstcontnr .row .user,
.lstcontnr .row .roles,
.hosts .row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.hostssponsors {
    padding: 6px 10px 10px 10px;
    text-align: left;
}

.hosts,
.sponsors {
    display: inline-block;
    text-align: left;
}

.hosts {
    margin-right: 8px;
}

@media (min-width: 900px) {
    .hosts,
    .sponsors {
        display: block;
    }
    .hosts {
        margin-bottom: 8px;
    }
}

.hosts .host,
.sponsors .sponsor {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    gap: 6px;
    margin-right: 12px;
    margin-bottom: 5px;
}

.lstcontnr .row .roles {
    padding-left: 6px;
}

/* More Attention Container - more opaque background to make this container stand out */
.info-contain.morat {
    background: rgba(255, 255, 255, 0.8);
}

.info-contain.morat .row .btn-icn {
    flex: 1;
}

@media (min-width: 560px) {
    .evntmng .info-contain.eventdetails {
        display: flex;
    }

    .evntmng .info-contain.eventdetails .col2 {
        flex: 1;
    }

    .evntmng .info-contain.eventdetails .actions {
        position: relative;
        right: -5px;
        display: flex;
        flex-direction: column;
        margin-top:0;
        width: 100px;
        gap: 4px;
    }

    .evntmng .info-contain.eventdetails .actions .btn-icn {
        flex: none;
    }
}

/* = Flat Long Shadow Box */
.flsbox {
  position: relative;
  margin: 0 -4px 0 10px;
  padding: 6px 6px 22px 6px;
  background-color: #fff;
  color: #000;
  border: 4px solid #000;
  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,
    -8px 8px 0 #000,
    -9px 9px 0 #000,
    -10px 10px 0 #000,
    -11px 11px 0 #000,
    -12px 12px 0 #000,
    -13px 13px 0 #000;
}

.flsbox.pad {
    padding: 10px 20px 22px 20px;
}

/* Flat Long Shadow Box Less Deep */
.flsboxl {
    position: relative;
    /* display: inline-block; */
    margin: 0 12px 0 25px;
    padding: 15px 20px 22px 20px;
    background-color: #fff;
    color: #000;
    border: 4px solid #000;
    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
}

.ntc-event-ended.flsbox {
    z-index: 500;
    position: relative;
    left: 8px;
    display: block;
    margin: 0 auto 25px auto;
    width: calc(100% - 12px);
    max-width: 620px;
}



@media (min-width: 900px) {
    .flsbox {
        /*padding: 20px 40px 40px 40px;*/
        padding: 20px;
    }
}


/* = Form After Text */
.formafttxt {
    margin-top: 20px;
}


/* = Form Elements
** ----------------------- */

input,
textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 16px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    color: #000;
    text-align: left;
    background: #fff;
    transition: all 0.15s ease;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border: 2px solid #000;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}

.checkbox-row input[type="checkbox"]:hover,
.checkbox-row input[type="checkbox"]:focus,
.checkbox-row input[type="checkbox"]:focus-visible,
.checkbox-row input[type="checkbox"]:active {
    outline: none;
    border-color: #000;
    background: #fff;
}

.checkbox-row input[type="checkbox"]:checked {
    background: #fff;
}

.checkbox-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 12px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

.checkbox-row label {
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-row label a {
    text-decoration: underline;
    color: inherit;
}

.checkbox-row label a:hover {
    opacity: 0.8;
}

input:hover,
textarea:hover,
select:hover {
    border: 2px solid #41FFFF;
}

input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus {
    border: 2px solid #5DF900;
}

textarea {
    line-height: 1.4;
}

textarea.auto-height {
  resize: vertical !important;
  overflow-y: auto;
}

.frm-lbl-grp {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
    width: 100%;
}

.frm-lbl-grp label {
    position: relative;
    z-index: 800;
    margin-top: -20px;
    margin-left: 10px;
    opacity: 0;
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
    transition: opacity 0.3s ease-in-out;
}

.frm-lbl-grp textarea.slbs + label {
    position: relative;
    bottom: 4px;
}

.frm-lbl-grp input.slbs:focus + label,
.frm-lbl-grp input.slbs:not(:placeholder-shown) + label,
.frm-lbl-grp textarea.slbs:focus + label,
.frm-lbl-grp textarea.slbs:not(:placeholder-shown) + label {
    opacity: 0.6;
    pointer-events: auto;
}

.frm-lbl-grp input.slbs:focus,
.frm-lbl-grp input.slbs:not(:placeholder-shown),
.frm-lbl-grp textarea.slbs:focus,
.frm-lbl-grp textarea.slbs:not(:placeholder-shown) {
    padding: 10px 10px 28px 10px;
}

/* ============================================
   LOCATION PICKER COMPONENT
   ============================================ */

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

/* Display Field - styled to look like .slbs input */
.location-display {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 10px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.location-display:hover {
    border-color: #5DF900;
}

.location-display:focus {
    outline: none;
    border-color: #5DF900;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

/* When dropdown is open */
.location-picker.is-open .location-display {
    border-color: #5DF900;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Display input - editable field inside display div */
.location-display-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #000000;
    font-size: 16px;
    line-height: 1.4;
    padding: 0;
    margin: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.location-picker.is-open .location-display-input {
    cursor: text;
}

.location-display-input::placeholder {
    color: #6c6c6c;
}

.location-display-input:focus,
.location-display-input:hover,
.location-display-input:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* When has value, add bottom padding for label */
.location-picker.has-value .location-display {
    padding: 10px 10px 28px 10px;
}

/* Copy button */
.location-copy-btn {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: 8px;
    border-radius: 4px;
    color: #6c757d;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.location-copy-btn:hover {
    color: #007bff;
    background: #f0f0f0;
}

.location-copy-btn.copied {
    color: #28a745;
    background: #d4edda;
}

/* Show copy button for URLs */
.location-picker.state-custom-url .location-copy-btn,
.location-picker.state-google-meet-created .location-copy-btn {
    display: flex;
}

.location-picker.is-open .location-copy-btn {
    display: none;
}

/* Label styling - inherits from .frm-lbl-grp label */
.location-picker label {
    position: absolute;
    bottom: 8px;
    left: 10px;
    z-index: 1;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    font-size: 12px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.location-picker.has-value label {
    opacity: 0.6;
}

.location-picker.is-open label {
    opacity: 0;
    transition: none;
}

.location-picker.is-open .location-display {
    padding-bottom: 10px;
}

/* ============================================
   DROPDOWN PANEL
   ============================================ */

.location-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #5DF900;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    overflow: hidden;
}

.location-picker.is-open .location-dropdown {
    display: block;
}

/* ============================================
   GOOGLE MEET BUTTON - LOADING STATE
   ============================================ */

.location-meet-btn.location-meet-loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.location-meet-btn.location-meet-loading:hover {
    background-color: #f8f9fa;
}

/* Replace icon with spinner when loading */
.location-meet-btn.location-meet-loading .location-option-icon svg {
    display: none;
}

.location-meet-btn.location-meet-loading .location-option-icon::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: location-meet-spin 0.8s linear infinite;
}

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

/* ============================================
   LOCATION DROPDOWN OPTIONS - Two-cell layout
   ============================================ */

.location-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #eee;
}

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

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

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

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

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

/* Virtual option styling */
.location-virtual-option .location-option-text {
    color: #333;
}

/* Use custom option styling */
.location-use-custom .location-option-text {
    color: #333;
}

/* Places results with icon layout */
.location-places-results .location-option {
    padding: 10px 12px;
}

.location-places-results .location-option-main {
    font-weight: 500;
    color: #333;
    text-align: left;
}

.location-places-results .location-option-secondary {
    font-size: 0.85em;
    color: #666;
    margin-top: 2px;
    text-align: left;
}

.location-places-results .location-option.selected {
    background-color: #f0f0f0;
}

/* Places autocomplete section */
.location-places-section {
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid #eee;
}

/* Hide places section when typing a URL */
.location-picker.typing-url .location-places-section {
    display: none;
}

/* Empty state for places */
.location-places-section:empty,
.location-places-results:empty {
    display: none;
}

.location-places-section:empty,
.location-places-results:empty ~ .location-places-section {
    border-top: none;
}

/* Places result items - reuse autocomplete styling */
.location-places-results .autocomplete-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s;
}

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

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

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

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

/* ============================================
   VISIBILITY DROPDOWN (event form)
   ============================================ */

/* Section wrapper: column flex in main form */
.form-visibility {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.form-visibility .grp {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: end;
}

.form-visibility .grp label {
    position: relative;
    top: 2px;
}

/* Adjust password field */
.form-visibility .prbs {
    margin-top: 4px;
    margin-bottom: 0;
}

/* Outer container: full width row; trigger aligns to the right */
.vd-contain {
    position: relative;
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    margin-left: 8px;
}

/* Inner box: shrink-wraps to the trigger width */
.visibility-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: auto;
    max-width: 100%;
}

/* Screen-reader / layout: native select stays in DOM for submit & validators */
.visibility-dropdown-native {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

.dd-btn-visibility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 48px;
    width: 200px;
    padding: 10px 12px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    color: #000;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dd-btn-visibility:hover {
    border-color: #5DF900;
}

.dd-btn-visibility:focus {
    outline: none;
    border-color: #5DF900;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

.vd-contain.is-open .dd-btn-visibility {
    border-color: #5DF900;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dd-selection {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    white-space: nowrap;
}

.dd-arrow {
    display: inline-block;
    position: relative;
    top: -2px;
    margin-left: 20px;
    width: 15px;
    height: 15px;
    align-items: center;
    text-indent: -9999px;
    background: url('/static/img/ic-arrow-sld-b.svg') no-repeat center center;
    transition: transform 0.2s ease;
}

.vd-contain.is-open .dd-arrow {
    transform: rotate(180deg);
}

.visibility-dropdown-list {
    position: absolute;
    left: auto;
    right: 0;
    top: 100%;
    z-index: 1002;
    margin: -2px 0 0 0;
    padding: 0;
    list-style: none;
    width: 250px;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #5DF900;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

.dd-option {
    margin: 0;
    padding: 12px 14px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid #eee;
    text-align: left;
}

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

.dd-option:hover,
.dd-option:focus {
    outline: none;
    background-color: #f5f5f5;
}

.dd-option[aria-selected="true"] {
    background-color: #f0f0f0;
}

.dd-option strong {
    display: block;
    font-weight: 600;
    text-align: left;
}

.dd-desc {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    font-weight: normal;
    color: #666;
    line-height: 1.35;
    text-align: left;
}

/* ============================================
   GOOGLE MEET BUTTON
   ============================================ */

/* Google Meet option - inherits from .location-option */
.location-meet-btn {
    background: #f8f9fa;
    border-top: 1px solid #eee;
    border-bottom: none;
}

.location-meet-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    background: #6c757d;
    color: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ============================================
   VALIDATION STATES
   ============================================ */

/* Invalid state */
.location-picker.is-invalid .location-display {
    border: 2px solid #ff34b7;
}


/* ============================================
   TICKET TYPES - SPECIAL LABEL HANDLING
   ============================================ */

/* Always-visible labels for fixed/flexible price fields */
.frm-lbl-grp.always-visible label {
    opacity: 0.6;
    pointer-events: auto !important;
}

.frm-lbl-grp.always-visible input {
    padding: 10px 10px 28px 10px !important;
}

.frm-lbl-grp.always-visible.input-with-prefix input {
    padding: 10px 10px 28px 30px !important;
}

.frm-lbl-grp.inl {
    position: relative;
    top: 14px;
    margin-bottom: 0;
    width: unset;
}

.inl input,
.inl input:focus {
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #000;
    font-size: 35px;
    font-weight: 400;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    background: none;
}

.inl .input-prefix {
    top: 3px;
    left: 0;
    font-size: 35px;
    font-weight: 600;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
}

.frm-lbl-grp.inl  label {
    opacity: 1;
    margin-top: 2px;
    margin-left: 0px;
    width: 100%;
    text-align: center;
}

.frm-lbl-grp.inl.input-with-prefix input:hover {
    border: none;
    border-bottom: 2px solid #41FFFF;
}

.frm-lbl-grp.inl.input-with-prefix input,
.frm-lbl-grp.inl.input-with-prefix input:focus,
.frm-lbl-grp.inl.input-with-prefix input:not(:placeholder-shown) {
    padding: 0 0 0 20px !important;
}

.frm-lbl-grp.inl.input-with-prefix input:focus {
    border-bottom: 2px solid #5DF900;
}

/* Upload File Box */
.upload-tile {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    color: #333;
    padding: 20px 10px 30px 10px;
}

.upload-tile:hover {
    background: rgba(255, 255, 255, 0.8);
}

.upload-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.2;
}

.inpt-grp {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Password visibility toggle */
.password-input-wrapper {
    position: relative;
    width: 200px;
    display: inline-block;
    float: right;
}

.password-input-wrapper input {
    padding-right: 40px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.password-toggle-btn:hover {
    opacity: 1;
}

/* Waiver Section */
.waiver-section {
    clear: both;
    margin-bottom: 20px;
}

/* Squad form - Access section: dropdown moves below info text when expanded */
body.squad-form .form-visibility {
    flex-wrap: wrap;
}

body.squad-form .form-visibility .info {
    width: 100%;
    /* margin-bottom: 8px; */
}

body.squad-form .form-visibility .inpt-grp {
    width: 100%;
}

/* Event Description Textarea */
.description-box-group {
    margin-bottom: 4px;
}

/* Ticket Types Container */
.ticket-types-section {
    display: block;
    margin-bottom: 20px;
}

.ticket-types-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

.ticket-type-box {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 10px 12px 12px 12px;
    position: relative;
}

.ticket-option-row .date-time .frm-lbl-grp {
    display: block;
}

@media (min-width: 550px) {
    .ticket-type-box {
        padding: 14px 20px 16px 20px;
    }
}

.ticket-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* Ticket Type Dropdown */
.ticket-type-dropdown {
    margin-bottom: 6px;
    width: 100%;
}

/* Ticket option rows */
.ticket-option-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 6px;
}

/* Label + input each take half the row (minus gap) — only used on capacity rows */
.ticket-option-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    text-align: left;
    padding-top: 10px;
}

.input-blk {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
}

.input-blk input[type="text"],
.input-blk input[type="number"],
.input-blk textarea {
    width: 100%;
}

.input-blk input[type="date"] {

}

/* Full-width fields (name and description) */
.ticket-option-row.full-width {
    display: block;
}

.ticket-option-row.full-width .frm-lbl-grp {
    width: 100%;
}

.ticket-option-row.date-time {
    flex-direction: column;
}

@media (min-width: 450px) {
    .ticket-option-row.date-time {
        flex-direction: row;
    }
}

/* Override default form group margins within ticket boxes */
.ticket-type-box .frm-lbl-grp {
    margin-bottom: 0;
}

.ticket-additional-options textarea {
    margin-bottom: 2px;
}

.tix-capacity {
    display: flex;
    flex-direction: column;
}

/* Column layout (<400px): full-width button; row layout restores chip + margin-left:auto */
.tix-capacity .btn-add {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
}

@media (min-width: 400px) {
    .tix-capacity {
        flex-direction: row;
    }

    .tix-capacity .btn-add {
        width: auto;
        margin-left: auto;
        align-self: flex-start;
    }
}

/* Date Time Selection */
.time-grp {
    position: relative;
    display: flex;
    gap: 6px;
    flex-direction: column;
    margin-bottom: 6px;
}

@media (min-width: 550px) {
    .time-grp {
        flex-direction: row;
    }
}

.time-grp .col {
    gap: 6px;
}

.time-grp .row {
    flex-direction: column;
    position: relative;
    gap: 4px;
}

@media (min-width: 550px) {
    .time-grp .row {
        flex-direction: row;
    }
}

.time-grp .frm-lbl-grp {
    margin-bottom: 0;
}

.time-grp .frm-lbl-grp input {
    position: relative;
    padding: 8px 10px 22px 8px;
}

.time-grp .frm-lbl-grp label {
    opacity: 0.6;
}

.time-grp .grp-date-time {
    display: flex;
    gap: 6px;
}

.time-zn {
    right: 0;
    box-sizing: border-box;
    margin-left: 50%;
    height: fit-content;
    width: calc(50% - 3px);
    text-align: left;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    color: #333;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #fff;
    white-space: normal;
    line-height: 1.3;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 500;
}

@media (min-width: 550px) {
    .time-zn {
        position: unset;
        margin-left: unset;
        height: 100%;
        width: unset;
        padding: 2px 5px;
    }
}

.time-zn strong {
    color: #000;
    font-weight: 600;
}

.time-zn:hover,
.time-zn:focus {
    background: rgba(255, 255, 255, 0.9);
}

input[type="date"],
input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  padding-right: 36px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 10px;
  width: 24px;
  height: 100%;
  cursor: pointer;
}

input[type="date"] {
    background: #fff url(../img/ic-calendar.svg?v=e5e3bdbd1721) no-repeat right 6px center;
}
input[type="time"] {
    background: #fff url(../img/ic-clock.svg?v=82dba2f41feb) no-repeat right 6px center;
}

/* Gray out native placeholder text (mm/dd/yyyy, --:-- --) when empty */
input[type="date"]:not(.has-value):not(.has-input),
input[type="time"]:not(.has-value):not(.has-input) {
    color: #757575;
}

/* = Managers List & Members List
** ----------------------- */
#memberListContent {
    display: flex;
    gap: 6px;
}

.mngrow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mngpfp,
.membspfp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #000;
    object-fit: cover;
}


/* = Content Containers
** ----------------------- */
/* Title Boxes */
.title-box {
    padding: 10px 15px;
}

/* Cause Spotlight */
.cause-sp h3 {
    text-align: left;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif; 
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin-bottom: 16px;
}

.cause-sp .sp-id {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px 0;
    gap: 8px;
}

.cause-sp .pfp {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    object-fit: cover;
}

.cause-sp .sp-id h4 {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cause-sp .sp-img {
    width: 100%;
}

.cause-sp .content p {
    text-align: left;
    font-size: 17px;
    line-height: 23px;
}


/* = Event Details Block */
.eventdetails .details,
.eventdetails .hboxtop,
.eventdetails .details .date,
.eventdetails .details .price-amount {
    text-align: left;
}

.eventdetails .col2 {
    flex-direction: column;
    gap: 0;
}

.evntmng .eventdetails .col2 {
    flex-direction: row;
    gap: 8px;
}

.evntmng .eventdetails .event-media-container {
    flex: 0 0 110px;
}

.evntmng .contain-btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

@media (min-width: 900px) {
    .eventdetails .col2 {
        gap: 8px;
    }
}

.eventdetails .col {
    flex: 1;
}

.eventdetails .btn-txt.vir {
    position: relative;
    top: 3px;
}

@media (min-width: 900px) {
    .eventdetails .col2 {
        flex-direction: row;
    }
    .my-events .eventdetails .event-media-container {
        flex: 0 0 150px;
        height: 180px; 
    }
}

.eventdetails .event-media-container + .col {
    padding-top: 8px;
}

.evntmng .eventdetails .event-media-container + .col {
    padding-top: 0;
}

.eventdetails .row {
    gap: 8px;
}

.eventdetails .btn-row {
    margin-top: 16px;
}

.eventdetails .actions {
    display: flex;
    gap: 6px;
    margin-top: 15px;
    width: 100%;
}

@media (min-width: 560px) {

}

.actions a.btn-icn {
    flex: 1;
}

/* Subtle Note */
.sn {
    display: block;
    font-size: 15px;
    color: #737373;
    font-style: italic;
}

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

.eventdetails .details {
    width: 100%;
    line-height: 22px;
}

.eventdetails .details .date,
.eventdetails .details .street {
    display: block;
    font-weight: 600;
    font-size: 17px;
    text-align: left;
}

.eventdetails .details .price-amount strong {
    font-weight: 600;
    font-size: 17px;
}

.eventdetails .details .lblsb {
    text-align: left;
    color: #3e3e3e;
    font-size: 14px;
    font-weight: 500;
}

.eventdetails .details .time-main {
    display: inline-block;
    text-align: left;
}

.eventdetails .details .timezone-info,
.eventdetails .details .pmin {
    display: inline-block;
    margin-top: 2px;
    text-align: left;
    color: #3e3e3e;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
}

.multi-day-1 {
    float: left;
}

.multi-day-1:after {
    position: relative;
    top: -12px;
    display: inline-block;
    margin: 0 9px 0 5px;
    text-align: left;
    content: "–";
}

/* = Event Images */
.mediacol,
.event-media-container,
.event-cover-image {
    max-width: 100%;
}

.mediacol {
    width: 100%;
}

.event-media-container {
    margin: 0 auto;
   /* padding: 5px 0 15px 0; */
}

.event-cover-image {
    max-height: 500px;
    border-radius: 4px;
    border: 2px solid #FFF;
}

.eventdetails .event-media-container img {
    max-height: 100%;
}


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

    .mediacol .event-media-container {
        padding: 0; 
    }

    .mediacol .event-media-container {
        padding-right: 20px;
    }

    .event-cover-image {
        max-height: unset;
    }

}

@media (max-height: 900px) {
    .event-cover-image, .event-cover-video {
        width: auto;
        max-width: 100%;
    }
}


/* Quantity selector section - only takes space it needs */
.ticket-quantity {
    position: relative;
    top: -2px;
    right: -1px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Guest Registration Status */
.regstatus {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding-bottom: 4px;
}

@media (min-width: 900px) {
    .regstatus {
        max-width: 580px;
    }
}


.regsuccess {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.4s ease;
    align-self: stretch;
    margin-bottom: 20px;
    width: 100%;
}

.regsuccess-visible {
    display: flex;
}

.regsuccess-fade-out {
    opacity: 0;
}

/* Smooth collapse of success block before hiding (reduces jarring page jump) */
.regsuccess.regsuccess-collapsing {
    overflow: hidden;
}

.regsuccess .icn {
    width: 40px;
    height: 40px;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.regsuccess .icn.icn-show {
    opacity: 1;
    transform: scale(1);
}

.regsuccess h2 {
    opacity: 0;
    transition: opacity 0.35s ease 0.15s;
}

.regsuccess h2.show {
    opacity: 1;
}

@keyframes regactions-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.regactions {
    width: 100%;
}

.regactions-fade-in {
    animation: regactions-fade-in 0.4s ease forwards;
}

/* regactions-narrow: top of page (inside regstatus), visible < 900px */
.regactions-narrow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 6.5em;
}

@media (min-width: 900px) {
    .regactions-narrow {
        display: none;
    }
}

/* regactions-wide: top of eventinfocol, visible >= 900px */
.regactions-wide {
    display: none;
    overflow: hidden;
}

@media (min-width: 900px) {
    .regactions-wide {
        display: block;
    }
}

@keyframes regactions-wide-expand {
    from {
        height: 0;
    }
    to {
        height: 7.2em;
    }
}

@media (min-width: 900px) {
    .regactions-wide.regactions-wide-expand {
        height: 0;
        animation: regactions-wide-expand 0.4s ease forwards;
    }

    .regactions-wide.regactions-wide-expand .btns,
    .regactions-wide.regactions-wide-expand > p {
        opacity: 0;
        animation: regactions-wide-content-fade-in 0.3s ease 0.4s forwards;
    }
}

@keyframes regactions-wide-content-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.regactions .btns {
    display: flex;
    gap: 6px;
}

.regactions .btns .btn-icn {
    flex: 1;
}

.regactions p {
    margin: 10px;
    text-align: left;
}

.regactions-wide p {
    margin: 10px 0 5px 0;
}

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

.regstatus .cancel {
    margin-top: 10px;
    color: #4C4C4C;
    font-size: 15px;
}


/* Hide quantity controls when only one ticket can be purchased */
.single-select-mode .ticket-quantity {
    display: none;
}

/* Ticket Status */
.ticstatus {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    text-align: left;
}

.ticstatus + #getAdditionalTicketsBtn {
    margin-top: 11px;
}

.ticstatus ~ #additionalTicketsSection {
    margin-top: 11px;
}

.ticstatus .btns {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 10px;
}

.ticstatus .btns .btn-icn {
    flex: 1;
}

.ticstatus .row {
    align-items: start;
    width: 100%;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 500px) {
    .ticstatus .row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap:10px;
    }
}

/* circle slash icon for no donation status commented out
.donation-stat.no-donation .icn {
    position: relative;
    top: 2px;
    margin-right: 4px;
    width: 15px;
    min-width: unset;
    height: 15px;
    background: url(../img/ic-no-b.svg?v=ddb6918c50ce) center no-repeat;
    opacity: 0.4;
}
*/

/* = Event Management Controls
** ----------------------- */

/* Controls */
.mng-contrl {
    display: flex;
    margin-bottom: 6px;
    border-radius: 4px;
    padding: 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(169, 250, 133, 0.6);
}

.mng-contrl p {
    padding-left: 5px;
    font-size: 16px;
    font-weight: 600;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    text-align: left;
}

/* = Referrals
** ----------------------- */

/* Refer Hosts and Impact Organizations */
.referrals .flsbox.pad .btns {
    margin: 0 auto;
    margin-top: 14px;
    display: flex;
    gap: 18px;
    max-width: 600px;
}

/* Referral Tree */
.referral-tree {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 20px;
}

.referral-tree .user {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.referral-tree .user:before {
    content: " ";
    display: block;
    width: 20px;
    height: 2px;
    background: #000;
}

/* A white section that hides the lower part of the left "stalk" on the referals tree */
.referral-tree .decendants .user.is-last-visible::after {
    content: " ";
    position: absolute;
    left: -2px;
    top: calc(50% + 1px);
    width: 4px;
    bottom: 0;
    background: #ffffff;
    z-index: 1;
}

.referral-tree .user.origin {
    margin-bottom: 0px;
}

.referral-tree .user .userinfo {
    display: flex;
    flex-direction: column;
    margin: -4px 0px;
}

.referral-tree .user.origin .userinfo {
    gap: 4px;
}

.referral-tree .user .pfp,
.referral-tree .user .pfpplhldr {
    margin-right: 8px;
    width: 46px;
    height: 46px;
    border: 3px solid #000;
}

.referral-tree .user.origin .pfp,
.referral-tree .user.origin .pfpplhldr {
    width: 80px;
    height: 80px;
    border: 4px solid #000;
}

.referral-tree .user.origin:before {
    display: none;
}

.referral-tree .user .name {
    font-weight: 600;
    font-size: 16px;
    text-align: left;
}

.referral-tree .user.origin .name {
    font-weight: 600;
    font-size: 20px;
}

.referral-tree .user .mbrsince {
    font-size: 13px;
    text-align: left;
    color: #777777;
}

.referral-tree .user.origin .mbrsince {
    font-size: 15px;
}

.referral-tree .decendants {
    display: block;
    margin-left: 40px;
    border-left: 2px solid #000;
}

/* Donation section reveal (post-registration context) */
.donation-section-fade-in {
    animation: donation-fade-in 0.4s ease forwards;
}

@keyframes donation-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Loading shimmer — reusable gradient-sweep placeholder.
   Used by event browse cards, nonprofit buttons, scanner. Compose with
   caller-specific positioning. */
.loading-shimmer {
    background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Loading pulse — reusable opacity pulse for skeleton placeholders.
   Used by event browse skeletons. Range widened from the original
   modals.css version (60% floor) to 40% for clearer skeleton feedback. */
.loading-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}