@charset "utf-8";
/* Title: Nice Industries Party Time Buttons
** Description: Styles for buttons used across Nice Industries digital products
** Author: Jessica Greenwalt
** Created: 10-26-2025
** Updated: 03-03-2026
************************************** */

/* Flat Standard - Solid black w/white text */
.btn-fs {
    display: inline-block;
    width: 100%;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 10px 20px 14px 20px;
    text-align: center;
    text-decoration: none;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    background: #000;
    color: #fff;
}

.btn-fs:disabled,
.btn-fs:disabled:hover {
    color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.2);
}

.btn-fs:hover {
    background: #fff;
    color: #000;
    font-weight: 700;
}

/* Minimal - Black outline, white inside, black text */
.btn-m {
    display: inline-block;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 8px 16px 10px 16px;
    text-align: center;
    text-decoration: none;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    color: #000;
}

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

/* Minimal Black - Black outline, black inside, white text */
.btn-m.blk {
    background: #000;
    color: #fff;
}

.btn-m.blk:hover {
    background: #fff;
    color: #000;
}

/* Subtle - Black outline, transparent inside, black text */
.btn-sbl {
    display: inline-block;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 6px 11px 7px 11px;
    text-align: center;
    text-decoration: none;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    background: transparent;
    color: #000;
}

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

/* Text Buttons */
.btn-txt {
    color: #000;
    background: none;
    text-decoration: none;
    font-weight: 600;
}
.btn-txt:disabled,
.btn-txt:disabled:hover {
    color: rgba(0, 0, 0, 0.3);
    cursor: default;
    pointer-events: none;
}

/* Text Icon Buttons */
.btn-ic-txt {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    padding-top: 5px;
    background: none;
}

.btn-ic-txt.settings {
    color: #000;
}

.btn-ic-txt.settings .ic {
    display: inline-block;
    background: url(../img/ic-gear-b.svg?v=d972ccda5572) center no-repeat;
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.btn-ic-txt.settings:hover .ic {
    animation: spin 1s linear infinite;
}

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

/* Icon Buttons */
.btn-icn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 5px 7px 5px 12px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    background: #fff;
    color: #000;
}

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

.btn-icn.blk {
    background: #000;
    color: #fff;
}

.btn-icn.blk:hover {
    background: #fff;
    color: #000;
}

.btn-icn .icn {
    display: inline-block;
    margin-left: 8px;
    width: 28px;
    height: 28px;
    text-indent: -9999px;
    overflow: hidden;
}

.btn-icn.view .icn {
    background: url(../img/ic-eye.svg?v=f1c503ad1386) center no-repeat;
}

.btn-icn.share .icn {
    background: url(../img/ic-megaphone.svg?v=7651132e6a80) center no-repeat;
}

.btn-icn.donate .icn {
    background: url(../img/ic-heart-y.svg?v=43e5e494218f) center no-repeat;
}

.btn-icn.edit .icn {
    background: url(../img/ic-pencil.svg?v=3ff98e0ad893) center no-repeat;
}

.btn-icn.mng .icn {
    background: url(../img/ic-manage.svg?v=f1fb37ba6002) center no-repeat;
}

.btn-icn.dup .icn {
    background: url(../img/ic-duplicate.svg?v=d3d58d21aafd) center no-repeat;
}

.btn-icn.mail .icn {
    background: url(../img/ic-envelope.svg?v=ff9c1dfdb3e1) center no-repeat;
}

.btn-icn.msg-guests .icn {
    background: url(../img/ic-two-envelopes.svg?v=8e6ef412be2b) center no-repeat;
}

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

.btn-icn.qr .icn {
    background: url(../img/ic-qr-b.svg?v=dd3fd0109b04) center no-repeat;
}

.btn-icn.qr:hover .icn {
    background: url(../img/ic-qr-w.svg?v=4bae7c8f362d) center no-repeat;
}

.btn-icn.blk.qr .icn {
    background: url(../img/ic-qr-w.svg?v=4bae7c8f362d) center no-repeat;
}

.btn-icn.blk.qr:hover .icn {
    background: url(../img/ic-qr-b.svg?v=dd3fd0109b04) center no-repeat;
}

.btn-icn.disabled {
    cursor: default;
}

/* Icon button in Account Panel */
.account-tab-panel .btn-icn.edit {
    position: absolute;
    right: 0px;
    top: -15px;
}

/* Add Ticket Button */
.btn-add {
    margin-top: 3px;
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    background: transparent;
    color: #000;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 255, 255, 0.3);
}

.btn-add .ic {
    flex-shrink: 0;
    background: url(../img/ic-plus-b.svg?v=64178098da88) center no-repeat;
    width: 13px;
    height: 13px;
    display: inline-block;
    transition: transform 0.2s ease;
}

.btn-add:hover .ic {
    background: url(../img/ic-plus-w.svg?v=690f1038404b) center no-repeat;
    transform: scale(1.2);
}

.btn-add:active .ic {
    background: url(../img/ic-plus-w.svg?v=690f1038404b) center no-repeat;
    transform: scale(1.8);
}

.btn-add .txt {
    position: relative;
    top: -1px;
}

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

.btn-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* See more nonprofits button in Create Event screen */
.btn-icn.morenps {
    float: right;
    padding: 5px 12px 5px 7px;
    margin-bottom: 20px;
}

.btn-icn.view.morenps .icn {
    margin-left: 0;
    margin-right: 8px;
}

/* Pop Out */
.btn-po {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    padding: 10px 20px 14px 20px;
    text-align: center;
    text-decoration: none;
    font-family:'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 650;
    font-size: 18px;
    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;
}

.btn-po:hover {
    position: relative;
    left: -7px;
    bottom: -7px;
    color: #000;
    box-shadow: -1px 1px 0 #000, 
                -2px 2px 0 #000,
                -3px 3px 0 #000;
}

.btn-po .btnh {
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: #000;
}

.btn-po .btnp {
    display: block;
    margin-top: 10px;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
    font-weight: 550;
    font-size: 15px;
    line-height: 18px;
}

.btn-po .icn {
    width: 40px;
    height: 40px;
}

.btn-po.party .icn {
    background: url(../img/ic-party-40.svg?v=cbcd0ceade31) center no-repeat;
}

.btn-po.heart-y .icn {
    background: url(../img/ic-heart-y-40.svg?v=b6c0dd0d9b82) center no-repeat;
}

.btn-po.mail .icn {
    background: url(../img/ic-envelope-40.svg?v=a11b0c2db172) center no-repeat;
}

/* Toggle Section */
.toglcontain {
    display: block;
    text-align: left;
}

.toglcontain .ltg {
    display: inline-block;
    position: relative;
    top: 8px;
}

.toglcontain label {
    padding-top: 4px;
    margin-right: 6px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 25px;
    flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #5DF700;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border: 2px solid #000;
  background-color: #000;
  border-radius: 26px;
  transition: background-color 0.3s ease;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 2px;
  top: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
  background-color: #000;
}

/* Pop Out in Header */
header .btn-po {
    z-index: 99;
    display: inline-block;
    width: fit-content;
    border-radius: 8px;
    padding: 3px 8px 6px 8px;
    text-align: center;
    text-decoration: none;
    font-family: 'Roboto Slab', Georgia, Lato, Helvetica, Arial, sans-serif;
    font-weight: 650;
    font-size: 18px;
    color: #000;
    background: #fff;
    border: 2px solid #000;
    box-shadow: -1px 1px 0 #000, 
                -2px 2px 0 #000, 
                -3px 3px 0 #000, 
                -4px 4px 0 #000;
}

header .btn-po:nth-child(1) {
    z-index: 100;
}

header .btn-po:hover {
    position: relative;
    left: -4px;
    bottom: -4px;
    color: #000;
    box-shadow: -1px 1px 0 #000;
}

.btn-po.black {
    color: #fff;
    background: #000;
    box-shadow: -1px 1px 0 #707070, 
                -2px 2px 0 #606060, 
                -3px 3px 0 #505050, 
                -4px 4px 0 #404040, 
                -5px 5px 0 #303030, 
                -6px 6px 0 #303030, 
                -7px 7px 0 #252525, 
                -8px 8px 0 #222222, 
                -9px 9px 0 #1f1f1f, 
                -10px 10px 0 #1c1c1c;
}

.btn-po.black:hover {
    color: #fff;
    background: #000;
    box-shadow: -1px 1px 0 #707070, 
                -2px 2px 0 #606060,
                -3px 3px 0 #505050;
}

header .btn-po.black {
    z-index: 88;
    margin-left: 7px;
    box-shadow: -1px 1px 0 #343434, 
                -2px 2px 0 #323232, 
                -3px 3px 0 #2a2a2a, 
                -4px 4px 0 #282828;
}

header .btn-po.black:hover {
    z-index: 88;
    margin-left: 7px;
    box-shadow: -1px 1px 0 #343434;
}

/* Nonprofit selection button */
.btn-np {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    height: 280px;
    width: 100%; /* Changed from max-width to width for consistency */
    max-width: 223px;
    border-radius: 10px;
    border: 2px solid #000;
    color: #000;
    background: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-np .ind-selected {
    display: none;
}

.btn-np.selected .ind-selected {
    display: inline-block;
    position: relative;
    z-index: 2;
    top: 8px;
    padding: 3px 12px 4px 12px;
    border-radius: 20px;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    background: #5DF900;
}

.btn-np:hover {
    border: 2px solid #46b900;
}
.btn-np:active {
    border: 2px solid #5DF900;
}

.btn-np.selected {
    border: 2px solid #5DF900;
}

/* Background image positioning */
.btn-np .btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 115px;
    object-fit: cover;
    z-index: 1;
}

.btn-np .inr-content {
    position: absolute;
    top: 86px;
    left: 0;
    padding: 0 15px 15px 15px;
}

.btn-np .pfp {
    position: relative;
    z-index: 99;
    display: inline-block;
    overflow: hidden;
    width: 58px;
    height: 58px;
    border-radius: 30px;
    border: 2px solid #fff;
    background: #fff;
}

.btn-np .pfp img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.btn-np .inr-content h3 {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 600;
}

.btn-np .inr-content p {
    font-size: 15px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-np .content h3 {
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

.btn-np .content p {
    margin-bottom: 5px;
    text-align: left;
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fix z-index issues to ensure content is clickable */
.btn-np * {
    pointer-events: none;
}

.btn-np {
    pointer-events: auto;
}

/* Smooth image loading with fade-in */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.btn-np .btn-bg,
.btn-np .pfp img {
    animation: fadeIn 0.3s ease-in;
}

/* Preload state - subtle skeleton effect */
.btn-np:not(.loaded) .btn-bg {
    background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.btn-np-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    padding: 12px 20px;
    margin-top: 10px;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-np-more:hover {
    background: #e8e8e8;
    border-color: #999;
}


/* Clickable Ticket Box */
.ticket-box {
    background: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Make ticket box clickable when multiple ticket types exist */
.ticket-box-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ticket-box-clickable:hover {
    border: 2px solid #a1ef56;
}

/* Quantity buttons */
.qty-btn {
    width: 24px;
    height: 23px;
    border: 2px solid #000;
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.qty-btn:hover {
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
}

.qty-btn:active {
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
}

/* Hide plus button by default when multiple ticket types exist */
.qty-plus-hidden {
    display: none !important;
}

/* List Container List Header Button */
.btnadd {
    border: 2px solid #000;
    border-radius: 6px;
    padding: 2px 7px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    background: #fff;
}

.btnadd:hover {
    color: #fff;
    background: #000;
}

.btnedt {
    display: inline-block;
    width: 28px;
    height: 28px;
    overflow: hidden;
    text-indent: -9999px;
    background: url(../img/ic-pencil.svg?v=3ff98e0ad893) center no-repeat;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btnedt:hover {
    animation: wiggle 0.6s infinite ease-in-out; /* Loops while hovering */
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-10deg) translateX(2px); }
    75% { transform: rotate(10deg) translateX(-2px); }
}

/* Role Buttons */
.rolbtns {
    position: relative;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
    margin-bottom: 40px;
    width: calc(100% - 10px);
}

.rolbtn {
    /*flex: 1 1 calc(50% - 3px);*/
    gap: 8px;
    border: 2px solid #000;
    display: flex;
    text-align: left;
    border-radius: 6px;
    padding: 10px 10px 14px 10px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
}

.rolbtn .text {
    flex-direction: column;
    display: flex;
}

.rolbtn .btnh {
    margin-bottom: 4px;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.rolbtn .btnp {
    text-align: left;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    font-family: "Figtree", Helvetica, Arial, sans-serif;
}

.rolbtn .rolbtn-star-wrapper {
    position: relative;
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.rolbtn .ic {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.rolbtn .star-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.rolbtn .burst-star {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    opacity: 0;
}

.rolbtn .burst-star .burst-star-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.rolbtn.burst-active .burst-star {
    opacity: 1;
    animation: burst-out 0.6s ease-out forwards;
}

@keyframes burst-out {
    from {
        transform: rotate(var(--r, 0deg)) translateY(0);
        opacity: 1;
    }
    to {
        transform: rotate(var(--r, 0deg)) translateY(-38px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rolbtn.burst-active .burst-star {
        animation: none;
        opacity: 0;
    }
}

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

.rolbtn:hover .rolbtn-star {
    animation: rolbtn-star-spin 1s ease;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .rolbtn:hover .rolbtn-star {
        animation: none;
    }
}

.rolbtn.selected {
    position: relative;
    left: -10px;
    bottom: -10px;
    background: rgba(93, 249, 0, 0.2);
    box-shadow: none;
}

/*
.rolbtn.ownr:hover {
    border-color: #bf2789;
    background: rgba(255, 52, 183, 0.1);
}
.rolbtn.ownr:active {
    background: rgba(255, 52, 183, 0.5);
}
.rolbtn.ownr.selected {
    border-color: #bf2789;
    background: rgba(255, 52, 183, 0.1);
}
.rolbtn.ownr.selected .btnh {
    color: #bf2789;
}

.rolbtn.host:hover {
    border-color: #bf7b05;
    background: rgba(255, 164, 6, 0.1);
}
.rolbtn.host:active {
    background: rgba(255, 164, 6, 0.5);
}
.rolbtn.host.selected {
    border-color: #bf7b05;
    background: rgba(255, 164, 6, 0.1);
}
.rolbtn.host.selected .btnh {
    color: #bf7b05;
}

.rolbtn.mngr:hover {
    border-color: #46b900;
    background: rgba(93, 247, 0, 0.11);
}
.rolbtn.mngr:active {
    background: rgba(93, 247, 0, 0.5);
}
.rolbtn.mngr.selected {
    border-color: #46b900;
    background: rgba(93, 247, 0, 0.1);
}
.rolbtn.mngr.selected .btnh {
    color: #46b900;
}

.rolbtn.scnr:hover {
    border-color: #31bfbf;
    background: rgba(65, 255, 255, 0.11);
}
.rolbtn.scnr:active {
    background: rgba(65, 255, 255, 0.5);
}
.rolbtn.scnr.selected {
    border-color: #31bfbf;
    background: rgba(65, 255, 255, 0.1);
}
.rolbtn.scnr.selected .btnh {
    color: #31bfbf;
}
*/

/* Disabled role buttons (non-interactive, used in QR scanner edit modal) */
.rolbtn.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.rolbtn.disabled:hover,
.rolbtn.disabled:active {
    border-color: #000;
    background: transparent;
}

/* Disabled but selected (e.g. scanner button in QR scanner edit modal) */
.rolbtn.disabled.selected {
    opacity: 1;
}