@import "01-tokens.css";
@import "02-base.css";

/* 
 * Note: 03-layout.css is enqueued separately in Assets.php 
 * based on the WCC_ENABLE_LOGICAL_CSS flag.
 */

/* --- Global Scroll Hint Utility --- */
.wcc-scroll-hint {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.wcc-scroll-hint::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    width: 60px;
    background: linear-gradient(to left, var(--wcc-bg, #ffffff), transparent);
    pointer-events: none;
    z-index: 2;
}

html[dir="rtl"] .wcc-scroll-hint::after {
    background: linear-gradient(to right, var(--wcc-bg, #ffffff), transparent);
}

.wcc-scroll-container {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.wcc-scroll-container::-webkit-scrollbar {
    display: none;
}


#wcc_donation_amount::-webkit-outer-spin-button,
#wcc_donation_amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#wcc_donation_amount {
    -moz-appearance: textfield;
}


#wcc_tip_amount::-webkit-outer-spin-button,
#wcc_tip_amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}