@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.fs-app
{
 font-family: "Raleway", sans-serif !important;
 font-weight: 700 !important;
}

main
{
 padding-left: 0.5rem !important;
 padding-right: 0.5rem !important;
}

.shadow-sm
{
 box-shadow: 0px 0px 2px rgb(255, 208, 0) !important;
}

.btn-auth
{
 background-color: blueviolet !important;
 padding: 0.5rem 4rem !important;
 border-radius: 0.5rem !important;
 color: white !important;
 font-size: 4.5vw !important;
 border-radius: 1.75rem !important;
}

.fs0-5
{
 font-size: 0.5vw !important;
}

.fs1-0
{
 font-size: 1vw !important;
}

.fs1-5
{
 font-size: 1.5vw !important;
}

.fs2-0
{
 font-size: 2vw !important;
}

.fs2-5
{
 font-size: 2.5vw !important;
}

.fs3-0
{
 font-size: 3vw !important;
}

.fs3-5
{
 font-size: 3.5vw !important;
}

.fs4-0
{
 font-size: 4vw !important;
}

.fs4-5
{
 font-size: 4.5vw !important;
}

.fs5-0
{
 font-size: 5vw !important;
}

.fs5-5
{
 font-size: 5.5vw !important;
}

.fs6-0
{
 font-size: 6vw !important;
}

.fs6-5
{
 font-size: 6.5vw !important;
}

.fs7-0
{
 font-size: 7vw !important;
}

.fs7-5
{
 font-size: 7.5vw !important;
}

.fs8-0
{
 font-size: 8vw !important;
}

.fs8-5
{
 font-size: 8.5vw !important;
}

.fs9-0
{
 font-size: 9vw !important;
}

.fs9-5
{
 font-size: 9.5vw !important;
}

.fs10-0
{
 font-size: 10vw !important;
}

.fs10-5
{
 font-size: 10.5vw !important;
}

.fs11-0
{
 font-size: 11vw !important;
}

.fs11-5
{
 font-size: 11.5vw !important;
}

.fs12-0
{
 font-size: 12vw !important;
}

.mw0-5
{
 width: 0.5vw !important;
}

.mw1-0
{
 width: 1vw !important;
}

.mw1-5
{
 width: 1.5vw !important;
}

.mw2-0
{
 width: 2vw !important;
}

.mw2-5
{
 width: 2.5vw !important;
}

.mw3-0
{
 width: 3vw !important;
}

.mw3-5
{
 width: 3.5vw !important;
}

.mw4-0
{
 width: 4vw !important;
}

.mw4-5
{
 width: 4.5vw !important;
}

.mw5-0
{
 width: 5vw !important;
}

.mw5-5
{
 width: 5.5vw !important;
}

.mw6-0
{
 width: 6vw !important;
}

.mw6-5
{
 width: 6.5vw !important;
}

.mw7-0
{
 width: 7vw !important;
}

.mw7-5
{
 width: 7.5vw !important;
}

.mw8-0
{
 width: 8vw !important;
}

.mw8-5
{
 width: 8.5vw !important;
}

.mw9-0
{
 width: 9vw !important;
}

.mw9-5
{
 width: 9.5vw !important;
}

.mw10-0
{
 width: 10vw !important;
}

.fs-cursive
{
 font-family: cursive !important;
}

.btn
{
 border-radius: 0.5rem !important;
}


.auth-form-control
{
 background-color: rgba(33, 33, 33, 0.371) !important;
 outline: none !important;
 box-shadow: none !important;
 font-size: calc(4.5vw + 1rem) !important;
 width: 100% !important;
 color: white !important;
 font-weight: 900 !important;
 padding: 3vw !important;
 border-radius: 1rem !important;
 line-height: calc(5vw + 1rem) !important;
 border-style: groove !important;
 border-bottom: 1px solid goldenrod !important;
}

.auth-form-control::placeholder
{
 background-color: rgba(33, 33, 33, 0) !important;
 font-size: calc(4.5vw + 1rem) !important;
 color: rgb(108, 108, 108) !important;
 font-weight: 500 !important;
}

.auth-form-control:focus
{
 background-color: rgba(33, 33, 33, 0.371) !important;
 outline: none !important;
 box-shadow: none !important;
 /* Added to remove blue focus ring */
 font-size: calc(4.5vw + 1rem) !important;
 color: white !important;
 font-weight: 900 !important;
}

.typing
{
 display: inline-block;
 white-space: nowrap;
 overflow: hidden;
 border: none;
 animation: typing 2s steps(30, end), blink 0.75s step-end infinite;
 font-family: monospace;
}

@keyframes typing
{
 from
 {
  width: 0;
 }

 to
 {
  width: 100%;
 }
}

@keyframes blink
{
 50%
 {
  border-color: transparent;
 }
}

.notification-box
{
 width: 100% !important;
 margin: 75% auto !important;
 max-width: 99% !important;
 box-shadow: 0px 0px 1px white !important;
}

.notification-box p
{
 font-size: 3vw !important;
}

.gsi-solution-alerts
{
 background-color: #000000c7 !important;
}

.bottom-nav-menus
{
 display: flex !important;
 justify-content: space-evenly !important;
 box-shadow: 0px 0px 1vw white;
 padding: 0.2vw 0.15vw !important;
 background-color: black !important;
}

.bottom-nav-menus a
{
 display: flex;
 width: auto;
 min-width: max-content;
 max-width: fit-content;
 flex-direction: column;
 line-height: 4vw !important;
 text-align: center;
 padding: 0.5vw 1.5vw !important;
}

.bottom-nav-menus a.active,
.bottom-nav-menus a:hover
{
 border-top-left-radius: 2rem !important;
 border-top-right-radius: 2rem !important;
 border-bottom-left-radius: 0.5rem !important;
 border-bottom-right-radius: 0.5rem !important;
}

.bottom-nav-menus a.active
{
 background-color: #ffc107;
}

.bottom-nav-menus a.active .icon
{
 color: black;
 font-weight: 900 !important;
}

.bottom-nav-menus a.active .title
{
 color: black;
 font-weight: 900 !important;
}

.bottom-nav-menus span.icon
{
 color: #ffc107;
}

.bottom-nav-menus span.title
{
 color: whitesmoke;
}

.app-header
{
 box-shadow: 0px 0px 1px white !important;
}

.text-muted
{
 color: grey !important;
}

.sale-list strong
{
 display: block !important;
 font-size: 2vw !important;
 color: grey !important;
 font-weight: 400 !important;
}

.font-italic
{
 font-style: italic !important;
}

.complaints-header.active
{
 box-shadow: 0px 0px 15px orange !important;
}

.form-control
{
 font-weight: 500 !important;
 border-bottom-style: groove !important;
 border-width: 2px !important;
 border-bottom-color: #eda309 !important;
 background: rgba(255, 255, 255, 0.662) !important;
 color: #fff;
 border-radius: 0.5rem;
}

.form-control:focus
{
 border-color: goldenrod !important;
 box-shadow: 0 0 5px goldenrod !important;
 background-color: rgba(0, 0, 0, 0.545) !important;
 color: white !important;
}

.app-heading
{
 font-size: 4vw !important;
 padding: 2vw 3vw !important;
}

.app-sub-heading
{
 font-size: 2.75vw !important;
 padding: 2vw 3vw !important;
}

.app-form-heading
{
 font-size: 2vw !important;
 padding: 1.75vw 2.4vw !important;
}

.text-secondary
{
 color: rgb(186, 186, 186) !important;
}

p.details
{
 margin-bottom: 2.25vw !important;
 line-height: normal !important;
}

.btn-remove-travel,
.btn-remove-outstation,
.btn-remove-other
{
 display: none;
}

.other-travel-entry:first-child .btn-remove-travel,
.outstation-entry:first-child .btn-remove-outstation,
.other-expense-entry:first-child .btn-remove-other
{
 display: none;
}

.star-rating
{
 text-align: center;
 font-size: 15vw;
 cursor: pointer;
}

.star
{
 color: #ccc;
 margin: 0 5px;
}

.star.text-warning
{
 color: #ffc107;
}

.signatureArea
{
 display: flex;
 justify-content: center;
 margin-top: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered
{
 color: white !important;
}

.sub-stage-counters
{
 display: flex;
 width: 100%;
 overflow-x: scroll;
}

.sub-stage-counters::-webkit-scrollbar
{
 display: none !important;
}

.sub-stage-counters .app-widget-counter
{
 margin-right: 0.25rem !important;
 margin-top: 0px !important;
 padding-top: 0px !important;
}

.sub-stage-counters a
{
 display: block;
 width: auto;
 min-width: 13rem;
 max-width: 13rem;
}

.custom-switch-ui
{
 position: relative;
 display: inline-block;
 width: 47px;
 height: 22px;
}

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

.slider-switch
{
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 transition: 0.4s;
 border-radius: 34px;
}

.slider-switch:before
{
 position: absolute;
 content: "";
 height: 18px;
 width: 18px;
 left: 3px;
 bottom: 2px;
 background-color: white;
 transition: 0.4s;
 border-radius: 50%;
}

.custom-switch-ui input:checked+.slider-switch
{
 background-color: #28a745;
 /* Green when active */
}

.custom-switch-ui input:checked+.slider-switch:before
{
 transform: translateX(24px);
}

/* Optional shadow for a better look */
.slider-switch:before
{
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.wallet-card
{
 background: linear-gradient(145deg, #444444, #000000);
 color: #fff;
 border-radius: 28px;
 box-shadow:
  0 12px 40px rgba(0, 0, 0, 0.6),
  0 4px 16px rgba(0, 0, 0, 0.4),
  inset 0 1px 0 rgba(255, 255, 255, 0.06),
  0 0 0 5px rgba(255, 255, 255, 0.04);
 overflow: hidden;
 position: relative;
 padding: 25px;
 min-height: 280px;
 /* Increased card height */
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
}

/* Animated background circles (4 circles) */
.wallet-card::before,
.wallet-card::after,
.wallet-card .circle-3,
.wallet-card .circle-4
{
 content: "";
 position: absolute;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(255, 241, 135, 0.326), transparent);
 z-index: 0;
 animation: float 8s ease-in-out infinite;
}

.wallet-card::before
{
 width: 200px;
 height: 200px;
 bottom: -60px;
 left: -60px;
 animation-delay: 0s;
}

.wallet-card::after
{
 width: 140px;
 height: 140px;
 top: -40px;
 right: -40px;
 animation-delay: 2s;
}

.wallet-card .circle-3
{
 width: 160px;
 height: 160px;
 top: 20%;
 left: 10%;
 animation-delay: 4s;
 background: radial-gradient(circle, rgba(255, 241, 135, 0.277), transparent);
}

.wallet-card .circle-4
{
 width: 100px;
 height: 100px;
 bottom: 10%;
 right: 15%;
 animation-delay: 6s;
 background: radial-gradient(circle, rgba(255, 241, 135, 0.293), transparent);
}

@keyframes float
{

 0%,
 100%
 {
  transform: translate(0, 0) scale(1);
 }

 50%
 {
  transform: translate(25px, 25px) scale(0.85);
 }
}

.wallet-header
{
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: relative;
 z-index: 1;
}

.wallet-left
{
 display: flex;
 align-items: center;
 gap: 12px;
}

.wallet-left img
{
 width: 65px;
 height: 60px;
 object-fit: contain;
 border-radius: 50%;
}

.wallet-left span
{
 font-size: 1.25rem;
 font-weight: 700;
 letter-spacing: 0.6px;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.wallet-right
{
 font-size: 0.95rem;
 color: rgba(255, 255, 255, 0.85);
 text-align: right;
}

.wallet-right strong
{
 color: #fff;
 font-weight: 600;
}

.wallet-amount-row
{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 24px;
 position: relative;
 z-index: 1;
}

.wallet-amount
{
 font-weight: 800;
 line-height: 1;
 letter-spacing: 0.5px;
 text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.wallet-subtle
{
 color: rgba(255, 255, 255, 0.85);
 font-size: 0.95rem;
 margin-top: 10px;
}

.wallet-meta
{
 font-size: 0.9rem;
 color: rgba(255, 255, 255, 0.75);
 text-align: right;
}

.wallet-meta strong
{
 color: #fff;
}

.wallet-chip
{
 position: absolute;
 top: 50%;
 right: 15px;
 transform: translateY(-50%);
 width: 85px;
 height: 85px;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="rgba(255,241,135,0.6)" stroke-width="1.5"><path d="M3 10h18M3 14h18M6 6h12v12H6z"/><path d="M8 8h8v8H8z"/></svg>') no-repeat center;
 background-size: contain;
 opacity: 0.4;
 z-index: 0;
}

.wallet-divider
{
 border-top: 1px dashed rgba(255, 255, 255, 0.18);
 margin: 20px 0;
 z-index: 1;
 position: relative;
}

.wallet-actions
{
 display: flex;
 gap: 14px;
 justify-content: space-between;
 z-index: 1;
 position: relative;
}

.wallet-actions .btn
{
 border-radius: 18px;
 padding: 12px 18px;
 font-weight: 600;
 border: 1px solid rgba(255, 255, 255, 0.22);
 backdrop-filter: blur(6px);
 transition: all 0.3s ease;
}

.btn-glass
{
 background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
 color: #fff;
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.btn-glass:hover
{
 background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.12));
 transform: translateY(-2px);
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.btn-glass-alt
{
 background: transparent;
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.28);
}

.btn-glass-alt:hover
{
 background: rgba(255, 255, 255, 0.12);
 transform: translateY(-2px);
 box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.fs-xxl
{
 font-size: clamp(34px, 6.5vw, 64px);
}

.bar-code-placement
{
 position: absolute;
 right: 1.35rem;
 font-size: 2.5rem;
 margin-top: -5rem;
 border-radius: 0.5rem !important;
 color: lightgray;
 background-color: red !important;
 padding: 0.25rem 0.75rem !important;
}

#scanner-modal
{
 display: none;
 position: fixed;
 top: 10%;
 left: 20%;
 width: 60%;
 height: 80%;
 background: black;
 z-index: 1000;
 color: white;
 text-align: center;
 padding: 1rem;
 border-radius: 0.5rem;
 box-sizing: border-box;
 box-shadow: 0px 0px 100px white !important;
}

.scanner-container
{
 position: relative;
 width: 100%;
 height: 70%;
 overflow: hidden;
 border-radius: 1rem;
 margin-top: 1rem;
 margin-bottom: 1rem;
}

#scanner-video
{
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 1rem;
 box-shadow: 0px 0px 15px yellow !important;
 margin-bottom: 1rem !important;
}

.scanner-line
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 margin: 1% auto;
 height: 4px;
 background: red;
 box-shadow: 0 0 10px red, 0 0 20px red;
 animation: scan 2s linear infinite;
 z-index: 10;
}

@keyframes scan
{
 0%
 {
  top: 0;
 }

 50%
 {
  top: calc(100% - 4px);
 }

 100%
 {
  top: 0;
 }
}

.product-card
{
 height: 240px;
 /* Reduced height for compact cards */
 overflow: hidden;
 margin-bottom: 15px;
 background: rgba(0, 0, 0, 0.5);
 /* Dark theme for card */
 border-radius: 10px;
 border: none;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.product-image-container
{
 position: relative;
 height: 100%;
 width: 40%;
 /* Balanced width */
 background: rgba(0, 0, 0, 0.7);
 /* Dark black with slight transparency */
 display: flex;
 align-items: center;
 justify-content: center;
}

.product-image-container img
{
 width: 95%;
 height: 95%;
 object-fit: cover;
 /* Ensure image fits well */
 border-radius: 5px;
 z-index: 1;
}

.product-image-container::after
{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.3);
 /* Subtle overlay for polished look */
 z-index: 0;
}

.product-details
{
 width: 60%;
 /* Complements image width */
 height: 100%;
 padding: 8px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 color: white;
}

.product-title
{
 font-size: 3.5vw;
 /* Slightly smaller for balance */
 font-weight: bold;
 margin-bottom: 0.5rem;
 color: white;
}

.product-meta
{
 font-size: 0.75rem;
 color: #ccc;
 margin-bottom: 4px;
 display: flex;
 justify-content: space-between;
}

.product-features
{
 font-size: 2.1vw;
 font-style: italic;
 margin-bottom: 4px;
 color: #ddd;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 /* Prevent text wrapping */
}

.product-desc
{
 font-size: 0.7rem;
 color: white;
 margin-bottom: 2px;
 overflow: hidden;
 text-align: justify;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 /* Limit to 2 lines */
 -webkit-box-orient: vertical;
}

.product-actions
{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: auto;
 /* Ensure buttons stay at bottom */
}

.price-btn
{
 background: #28a745;
 color: white;
 padding: 4px 8px;
 border: none;
 border-radius: 4px;
 font-weight: bold;
 font-size: 0.8rem;
 margin-bottom: 0.5rem !important;
}

.cart-btn
{
 background: #ffc107;
 color: #000;
 padding: 4px 8px;
 border: none;
 border-radius: 4px;
 font-weight: bold;
 font-size: 0.8rem;
 display: flex;
 align-items: center;
 gap: 4px;
}

.sales-menu.disabled
{
 opacity: 0.5 !important;
 pointer-events: none !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
input[type="date"].form-control
{
 font-weight: 700 !important;
 border-bottom-style: groove !important;
 border-width: thin !important;
 border-bottom-color: #eda309 !important;
 background: rgba(255, 255, 255, 0.06) !important;
 color: #fff !important;
 border-radius: 0.85rem !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
input[type="date"].form-control:focus
{
 border-color: goldenrod !important;
 box-shadow: 0 0 5px goldenrod !important;
 background-color: rgba(0, 0, 0, 0.047) !important;
 color: white !important;
}

.br1
{
 border-radius: 1rem !important;
}

.br2
{
 border-radius: 2rem !important;
}

.br3
{
 border-radius: 3rem !important;
}

.br4
{
 border-radius: 4rem !important;
}

.br5
{
 border-radius: 5rem !important;
}

.br6
{
 border-radius: 6rem !important;
}

.br7
{
 border-radius: 7rem !important;
}

.br8
{
 border-radius: 8rem !important;
}

.br9
{
 border-radius: 9rem !important;
}

.br10
{
 border-radius: 10rem !important;
}

.form-control,
.form-control,
.form-control,
.form-control::placeholder,
.form-control::placeholder,
.form-control::placeholder,
.form-control:focus,
.form-control:focus,
.form-control:focus,
input,
select,
textarea
{
 line-height: 6vw !important;
 font-size: 3.75vw !important;
 font-weight: 900 !important;
}

input[type="date"].form-control,
input[type="date"].form-control:focus
{
 line-height: 6vw !important;
 height: 9.85vw !important;
 font-weight: 900 !important;
 font-size: 3.75vw !important;
}

.select2-container--default .select2-selection--single
{
 background: rgba(255, 255, 255, 0.021) !important;
 outline: none !important;
 box-shadow: none !important;
 font-size: 3.75vw !important;
 color: white !important;
 width: 100% !important;
 font-weight: 900 !important;
 border-radius: 0.5rem !important;
 padding-left: 0.25rem !important;
 line-height: 7.5vw !important;
 border: none !important;
 border-bottom: 1px groove #eda309 !important;
}

/* Selected Text */
.select2-container--default .select2-selection--single .select2-selection__rendered
{
 color: white !important;
 font-size: 3.75vw !important;
 font-weight: 900 !important;
 background: rgba(255, 255, 255, 0.021) !important;
 width: 95% !important;
 line-height: 7.5vw !important;
 padding-left: 0.5rem !important;
 border-radius: 0.4rem !important;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder
{
 color: rgb(255, 255, 255) !important;
 font-size: 3.75vw !important;
 font-weight: 900 !important;
}

/* Focus */
.select2-container--default.select2-container--focus .select2-selection--single
{
 outline: none !important;
 box-shadow: none !important;
 background: rgba(255, 255, 255, 0.021) !important;
 border-bottom: 1px groove #eda309 !important;
}

/* Dropdown */
.select2-dropdown
{
 background-color: #222 !important;
 border-radius: 0.5rem !important;
 border: none !important;
}

/* Options */
.select2-results__option
{
 font-size: 3vw !important;
 font-weight: 700 !important;
 color: white !important;
 border-style: groove !important;
 border-bottom-width: thin !important;
 border-color: #eda309 !important;
}

.select2-results__options
{
 max-height: 500px !important;
 overflow-y: scroll !important;
}

.select2-results__option--highlighted
{
 background-color: #444 !important;
}

/* ===== Search Box Styling ===== */
.select2-search--dropdown .select2-search__field
{
 font-size: 3vw !important;
 border-radius: 0.5rem !important;
 border: 1px solid #eda309 !important;
 background-color: #11111100 !important;
 color: #fff !important;
 outline: none !important;
}

/* Search Placeholder */
.select2-search--dropdown .select2-search__field::placeholder
{
 font-size: 3.5rem !important;
 line-height: 6vw !important;
 content: "Search..." !important;
 background-color: white !important;
 color: black !important;
}

/* ==============================
   DARK MATERIAL NEON THEME
============================== */
:root
{
 --app-text-color: #f7a305;
}

a.neon
{
 color: #f5c542;
 /* golden */
 text-decoration: none;
 transition: color 0.25s ease, text-shadow 0.25s ease;
}

a.neon:hover
{
 color: #ffd86b;
 /* brighter gold */

 /* underline without shifting layout */
 text-decoration-line: underline;
 text-decoration-color: #776917;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;

 color: #fefefe;

 text-shadow:
  0 0 4px rgba(255, 204, 0, 0.35),
  0 0 10px rgba(255, 204, 0, 0.2);
}

.neon-time-weather
{
 color: #f5d76e;
 /* soft golden */
 letter-spacing: 0.5px;
}

/* ===== TIME ===== */
#Time
{
 font-size: 35px;
 font-weight: 900;
 margin-bottom: -3px;
 color: #f5f5f5;
 /* material white */

 text-shadow:
  0 0 4px rgba(255, 215, 0, 0.35),
  0 0 12px rgba(255, 215, 0, 0.25),
  0 0 24px rgba(255, 180, 0, 0.2);
}

/* ===== DATE ===== */
#Date
{
 font-size: 14px;
 font-weight: 600;
 color: #cfcfcf;

 text-shadow:
  0 0 3px rgba(255, 215, 0, 0.2),
  0 0 8px rgba(255, 215, 0, 0.15);
}

/* ===== WEATHER TEXT ===== */
#WeatherInformation
{
 font-size: 12px;
 margin-top: -3px;
 color: #fefefe;

 text-shadow:
  0 0 4px rgba(255, 204, 0, 0.35),
  0 0 10px rgba(255, 204, 0, 0.2);
}

/* ===== WEATHER LINK ===== */
#WeatherInformation a
{
 color: #ffdd77;
 text-decoration: none;
 border-bottom: 1px solid rgba(255, 215, 0, 0.4);
}

#WeatherInformation a:hover
{
 color: #fff2b0;
 text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* ===== ICON BASE ===== */
.weather-icon
{
 font-size: 50px;
 margin-top: -10px;
 color: #ffd700;

 animation: neonPulse 2.5s ease-in-out infinite;
}

/* ===== NEON PULSE ===== */
@keyframes neonPulse
{
 0%
 {
  text-shadow:
   0 0 6px rgba(255, 215, 0, 0.4),
   0 0 14px rgba(255, 215, 0, 0.25);
 }

 100%
 {
  text-shadow:
   0 0 14px rgba(255, 215, 0, 0.9),
   0 0 32px rgba(255, 180, 0, 0.6);
 }
}

/* ===== SUN ROTATION ===== */
.sun
{
 display: inline-block;
 /* IMPORTANT */
 transform-origin: 50% 50%;
 /* center rotation */
 will-change: transform;

 animation:
  spin 6s linear infinite,
  neonPulse 2.5s ease-in-out infinite;
}

@keyframes spin
{
 0%
 {
  transform: rotate(0deg);
 }

 100%
 {
  transform: rotate(360deg);
 }
}

/* ===== CLOUD FLOAT ===== */
.cloud
{
 animation:
  float 4s ease-in-out infinite,
  neonPulse 2.5s ease-in-out infinite;
}

@keyframes float
{
 0%
 {
  transform: translateX(0);
 }

 50%
 {
  transform: translateX(14px);
 }

 100%
 {
  transform: translateX(0);
 }
}

/* ===== FLEX UTILITY ===== */
.neon-display-flex-end
{
 display: flex !important;
 justify-content: flex-end !important;
}

.neon-display-flex-start
{
 display: flex !important;
 justify-content: flex-start !important;
}

/* ==============================
   NEON MATERIAL NAV PROFILE
============================== */

.header-nav .nav-profile
{
 display: inline-flex;
 align-items: center;

 color: #f5c542;
 /* soft neon gold */
 padding: 0.35rem 0.65rem;
 border-radius: 4rem;

 background: rgba(0, 0, 0, 0.35);
 /* translucent glass over image */
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);

 box-shadow:
  0 0 6px rgba(236, 162, 9, 0.45),
  0 0 18px rgba(236, 162, 9, 0.25),
  inset 0 0 6px rgba(255, 215, 0, 0.25);

 transition: all 0.35s ease;
}

/* ===== PROFILE IMAGE ===== */
.header-nav .nav-profile-neon img
{
 max-height: 36px;
 border-radius: 50%;

 box-shadow:
  0 0 4px rgba(255, 215, 0, 0.6),
  0 0 10px rgba(236, 162, 9, 0.4);
}

/* ===== PROFILE NAME ===== */
.header-nav .nav-profile-neon span
{
 font-size: 14px;
 font-weight: 600;
 margin-right: 0.65rem;

 color: #ffe08a;
 text-shadow:
  0 0 4px rgba(236, 162, 9, 0.6),
  0 0 8px rgba(236, 162, 9, 0.35);
 display: grid;
 line-height: initial;
}

.neon-text-gold
{
 color: #f5c542;
 text-shadow:
  0 0 10px rgba(255, 204, 0, 0.533),
  0 0 15px rgba(255, 204, 0, 0.374);
}

.neon-text-gold:hover
{
 color: #ffffff;
 text-shadow:
  0 0 10px rgba(255, 204, 0, 0.533),
  0 0 15px rgba(255, 204, 0, 0.374);
}

.neon-text-white
{
 color: #f5f5f5;
 text-shadow:
  0 0 10px rgba(255, 255, 255, 0.407),
  0 0 15px rgba(255, 217, 0, 0.473);
}

.neon-text-white:hover
{
 color: #f5c542;
 text-shadow:
  0 0 10px rgba(255, 255, 255, 0.407),
  0 0 15px rgba(255, 217, 0, 0.473);
}

.neon-text-soft
{
 color: #cfcfcf;
 text-shadow:
  0 0 2px rgba(255, 215, 0, 0.15);
}

.neon-shadow-soft
{
 box-shadow:
  0 0 6px rgba(236, 162, 9, 0.35),
  0 0 14px rgba(236, 162, 9, 0.2);
}

.neon-shadow-medium
{
 box-shadow:
  0 0 8px rgba(236, 162, 9, 0.5),
  0 0 22px rgba(236, 162, 9, 0.35);
}

.neon-shadow-strong
{
 box-shadow:
  0 0 12px rgba(236, 162, 9, 0.75),
  0 0 32px rgba(236, 162, 9, 0.55);
}

.neon-glass
{
 background: rgba(0, 0, 0, 0.35);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);

 box-shadow:
  inset 0 0 6px rgba(255, 215, 0, 0.25),
  0 0 10px rgba(236, 162, 9, 0.3);
}

.neon-raised
{
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.neon-raised:hover
{
 transform: translateY(-2px);
 box-shadow:
  0 0 12px rgba(236, 162, 9, 0.6),
  0 0 28px rgba(236, 162, 9, 0.4);
}

.neon-pulse
{
 animation: neonPulse 2.5s ease-in-out infinite;
}

@keyframes neonPulse
{
 0%
 {
  text-shadow:
   0 0 6px rgba(255, 215, 0, 0.35),
   0 0 14px rgba(255, 215, 0, 0.2);
 }

 100%
 {
  text-shadow:
   0 0 14px rgba(255, 215, 0, 0.9),
   0 0 32px rgba(255, 180, 0, 0.6);
 }
}