/* Overlay */
.sonniss-sidecart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 999998;
    backdrop-filter: blur(2px);
}

.sonniss-sidecart-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Sidecart Container */
.sonniss-sidecart {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    max-height: 100vh;
    background: #1c1c1c;
    color: #ffffff;
    z-index: 999999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
}

.sonniss-sidecart.open {
    right: 0;
}

/* Header */
.sonniss-sidecart-header {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    background: #1c1c1c;
}

.sonniss-sidecart-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.sonniss-sidecart-close:hover {
    opacity: 1;
}

.sonniss-sidecart-header h2 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

/* Content Area */
.sonniss-sidecart-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Cart Items */
.sonniss-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #1c1c1c;
}

.sonniss-cart-item {
    display: grid;
    grid-template-areas: "image details quantity-wrapper remove";
    grid-template-columns: 100px 1fr auto auto;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    align-items: start;
}

.sonniss-cart-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.sonniss-cart-item-image {
    grid-area: image;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 6px;
}

.sonniss-cart-item-image a {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
}

.sonniss-cart-item-image a:hover {
    opacity: 0.9;
}

.sonniss-cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.sonniss-cart-item-details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 8px;
}

.sonniss-cart-item-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 0.95em;
    line-height: 1.3;
}

.sonniss-cart-item-title a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sonniss-cart-item-title a:hover {
    opacity: 0.9;
}

.sonniss-cart-item-vendor {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.sonniss-cart-item-vendor a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.sonniss-cart-item-vendor a:hover {
    opacity: 0.9;
}

.sonniss-cart-item-price {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 1em;
    margin-top: 6px;
}

.sonniss-cart-item-regular-price {
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
}

.sonniss-cart-item-sale-price {
    color: #00ff95;
    font-weight: 700;
    font-size: 1.1em;
}

.sonniss-cart-item-quantity-wrapper {
    grid-area: quantity-wrapper;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sonniss-cart-item-quantity {
    display: inline-flex;
    align-items: center;
    background: #252525;
    border-radius: 6px;
    overflow: hidden;
    width: 100px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 0;
}

.sonniss-quantity-input {
    width: 40px;
    text-align: center;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    -moz-appearance: textfield;
}

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

.sonniss-quantity-minus,
.sonniss-quantity-plus {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    width: 40px;
    height: 36px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 16px;
    padding: 0;
}

.sonniss-quantity-minus:hover,
.sonniss-quantity-plus:hover {
    background: transparent;
    color: #fff;
    opacity: 1;
}

.sonniss-license-text {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.sonniss-cart-item-remove {
    grid-area: remove;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 1.2em;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.sonniss-cart-item-remove:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Empty Cart */
.sonniss-cart-empty {
    text-align: center;
    padding: 40px 16px;
}

.sonniss-cart-empty p {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
}

/* Footer */
.sonniss-sidecart-footer {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #1c1c1c;
    flex-shrink: 0;
    min-height: 220px;
}

.sonniss-sidecart-coupon {
    margin-bottom: 20px;
}

.sonniss-sidecart-coupon-toggle {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
    cursor: pointer;
    font-size: 0.95em;
    transition: color 0.2s ease;
}

.sonniss-sidecart-coupon-toggle:hover {
    color: #fff;
}

.sonniss-sidecart-coupon-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    transition: all 0.3s ease;
}

.sonniss-sidecart-coupon-form.active {
    max-height: 42px;
    opacity: 1;
    visibility: visible;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* Total Savings Display */
.sonniss-sidecart-savings {
    background: rgba(0, 255, 149, 0.1);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: savingsPulse 2s ease-in-out infinite;
}

.sonniss-sidecart-savings .savings-text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.95em;
}

.sonniss-sidecart-savings .savings-amount {
    color: #00ff95;
    font-weight: 700;
    font-size: 1.1em;
}

@keyframes savingsPulse {
    0% { background: rgba(0, 255, 149, 0.1); }
    50% { background: rgba(0, 255, 149, 0.15); }
    100% { background: rgba(0, 255, 149, 0.1); }
}

input[type="text"]#sonniss-coupon-code {
    flex: 1;
    background: #252525;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 14px;
    height: 42px;
    line-height: 42px;
}

.sonniss-sidecart-coupon-form .apply-button,
.sonniss-sidecart-coupon-form .button:not(.button-primary) {
    background: #252525 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 0 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    height: 42px !important;
    line-height: 42px !important;
    min-width: 80px;
    text-transform: uppercase;
    margin: 0 !important;
    box-shadow: none !important;
}

.sonniss-sidecart-coupon-form .apply-button:hover {
    background: #2a2a2a;
    color: #fff;
}

.sonniss-applied-coupons {
    margin: 0 0 16px;
    padding: 0;
}

.sonniss-applied-coupons {
    min-height: 0;
    transition: min-height 0.3s ease;
}

.sonniss-applied-coupon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #252525;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sonniss-coupon-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sonniss-coupon-code {
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
}

.sonniss-coupon-amount {
    color: #00ff95;
    font-weight: 500;
}

.sonniss-remove-coupon {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    transition: color 0.2s;
}

.sonniss-remove-coupon:hover {
    color: rgba(255, 255, 255, 0.8);
}

.sonniss-coupon-message {
    margin: 8px 0;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    background: #252525;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sonniss-coupon-message.success {
    background: rgba(0, 255, 149, 0.1);
    border-color: rgba(0, 255, 149, 0.2);
    color: #00ff95;
}

.sonniss-coupon-message.error {
    background: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

.sonniss-coupon-message.loading {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    animation: pulse 1.5s ease-in-out infinite;
}

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

.sonniss-sidecart-subtotal {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 1.1em;
    letter-spacing: -0.01em;
}

.sonniss-sidecart-checkout {
    display: block;
    width: 100%;
    background: #00ff95;
    color: #000;
    text-align: center;
    padding: 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: -0.01em;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 255, 149, 0.2);
}

.sonniss-sidecart-checkout:hover {
    background: #00e085;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 255, 149, 0.3);
}

/* Scrollbar Styling */
.sonniss-cart-items::-webkit-scrollbar {
    width: 8px;
}

.sonniss-cart-items::-webkit-scrollbar-track {
    background: #1c1c1c;
}

.sonniss-cart-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.sonniss-cart-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Body Class */
body.sonniss-sidecart-open {
    overflow: hidden;
}

/* Responsive */
@media (max-width: 420px) {
    .sonniss-sidecart {
        width: 100%;
        right: -100%;
    }
}

/* ------------------------------------------------------------------
   iOS checkout-reachability fix - 2026-09-04
   Spec: Dev/2026-09-04 Side Cart iPhone Checkout Blocker - Dev Team Spec.md
   Reported by a customer who could not reach Proceed to Checkout on an
   iPhone in either orientation, with only one item in the cart.

   Two faults corrected:
   1. On iOS, 100vh is the LARGE viewport (the height as if Safari's toolbars
      were hidden). It never shrinks while they are showing, so the drawer hung
      below the visible area and its bottom sat under the toolbar. 100dvh
      tracks the real viewport. The 100vh rule above remains as the fallback.
   2. The checkout button was the last child of a rigid, non-scrolling footer,
      so it was the first thing clipped and no scroll could reach it. It is now
      a direct child of .sonniss-sidecart (see templates/cart.php) and
      flex:0 0 auto, so flexbox reserves its height before anything else gets
      space. The footer absorbs the squeeze and scrolls internally instead.
   ------------------------------------------------------------------ */

.sonniss-sidecart {
    height: 100dvh;
    max-height: 100dvh;
}

.sonniss-sidecart-content {
    flex: 1 1 0;
    min-height: 0;
}

/* Keeps the item window usable on short screens. The 280px guard matters:
   below that, this floor would compete with the button for space. */
@media (min-height: 280px) {
    .sonniss-sidecart-content {
        min-height: 100px;
    }
}

.sonniss-cart-items {
    overscroll-behavior: contain;
}

.sonniss-sidecart-footer {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
}

/* width:auto overrides the earlier width:100%, which would otherwise overflow
   by the horizontal margins now that the button is a flex child of the drawer. */
.sonniss-sidecart-checkout {
    flex: 0 0 auto;
    width: auto;
    margin: 8px 16px 16px;
}
/* Centre the checkout label on every page - 2026-09-05.
   The theme's .button rule (design.css, which loads after this file) sets
   display:inline-flex and wins the specificity tie with .sonniss-sidecart-checkout.
   That turns the anchor into a flex container, where text-align does nothing,
   so the label sat at flex-start (left) on every page WITHOUT the .woocommerce
   body class: home, checkout, my-account, the vendor dashboard, search, 404.
   On .woocommerce pages WooCommerce's own a.button rule flipped it back to
   inline-block and it looked centred, hence "sometimes left, sometimes centre".
   The ID gives this rule (1,1,0) so it wins everywhere. Accepting flex and
   centring with justify-content is more robust than fighting display back to
   block. Matches exactly one element on the site. Verified on nine templates
   with every other computed property identical before and after. */
#sonniss-sidecart .sonniss-sidecart-checkout {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* Long variation names must wrap inside the details column, never widen the
   row - 2026-09-05. A 1fr grid track is minmax(auto, 1fr): it will not go
   narrower than its content's minimum width, so an unbreakable token such as
   2496sfx_ImmersiveNightInTheCity_Stereo widened the details column, pushed
   the row past the container, and the remove (x) button off the right edge
   behind a horizontal scrollbar. min-width:0 lets the cells shrink;
   overflow-wrap lets the token break; overflow-x:hidden guarantees no
   horizontal bar. Spec: Dev/2026-09-05 Side Cart Long Title Overflow - Dev Team Spec.md */
.sonniss-cart-item > * {
    min-width: 0;
}

.sonniss-cart-item-details {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sonniss-cart-items {
    overflow-x: hidden;
}