html {
    font-size: 13pt;
}

html, body {
    height: 100%;
}

* {
    touch-action: pan-x pan-y;
}

    /* 只要不是輸入框，都不允許長按選取文字 */
    *:not(input):not(textarea) {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50' fill='%23444444'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 1rem;
    background-position: calc(100% - 20px) center;
    background-repeat: no-repeat;
}

.error {
    color: var(--danger);
}

p {
    margin-bottom: 0.5rem !important;
}

hr {
    border-width: 1px;
}

    hr.dashed {
        border-style: dashed;
    }

body {
    background: #f8f9fa;
}

.bg-light-gray {
    background: #e9ecef !important;
}

.number {
    font-size: 1.4rem;
    font-weight: bold;
}

.nothing {
    text-align: center;
    padding-top: 30vh;
}

    .nothing::before {
        background-image: url(/img/empty.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 20vw;
        margin-bottom: 1rem;
        display: block;
        content: '';
    }

.LPModal .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
}

.card {
    filter: drop-shadow(1px 1px 3px #9999);
}

.link {
    text-decoration: underline;
}

.bg-brown {
    background: #cc9966;
}

.text-brown {
    color: #CC9966 !important;
}

.w-passive-100 {
    width: 0;
    min-width: 100%;
}

.h-passive-100 {
    height: 0;
    min-height: 100%;
}

.nowrap {
    white-space: nowrap;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.clear-both {
    clear: both;
}

.data-table td:last-child {
    text-align: right;
}

.btn-xs {
    font-size: 80% !important;
    line-height: 1.5em;
    vertical-align: 0.05em;
}

/* 驗證 */

.validation-message {
    color: red;
    font-size: 0.9rem;
}

.btn-shadow {
    box-shadow: rgba(0,0,0,0.25) 1px 1px 4px;
}

.modal-dialog-centered {
    justify-content: center;
}

.modal-xs .modal-content {
    width: 60vw;
}

/* 商城 */

.item-photo {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 100%;
    border-radius: .3rem;
    position: relative;
}

    .item-photo .amount {
        position: absolute;
        top: 0px;
        right: 0px;
        min-width: 1.5rem;
        height: 1.5rem;
        text-align: center;
        color: white;
        white-space: nowrap;
        background-color: var(--info);
        border-top-right-radius: .3rem;
    }

/** Step */

.btn-circle {
    width: 4rem;
    height: 4rem;
    text-align: center;
    line-height: 2.5rem;
    padding: 0.75rem;
    border-radius: 2rem;
    border: none;
    font-size: 2.5rem;
    font-weight: bold;
    color: #F1F1F1;
    display: inline-block;
}

    .btn-circle.active {
        color: white;
        background: var(--gradient-success);
    }

div.btn-circle {
    background: white;
}

.step-arrow {
    position: absolute;
    top: 1rem;
    right: -1rem;
    font-size: 2rem;
    color: #989898;
}

/* grower layout */

.grower {
    display: flex;
    flex-direction: column;
}

    .grower main {
        flex-grow: 1;
        height: 0; /* Safari 修正 */
        overflow-y: auto;
        overflow-x: hidden;
    }

    .grower header, .grower footer {
        background: white;
        box-shadow: rgba(0,0,0,0.15) 0px 0px 10px;
        position: sticky;
        left: 0px;
        left: 0px;
        width: 100%;
        z-index: 512;
        flex-shrink: 0;
        flex-grow: 0;
    }

    .grower footer {
        bottom: 0px;
    }

    .grower header {
        top: 0px;
    }

/***********************************
    Badge
************************************/

.card-badge {
    position: relative;
    left: -1rem;
    top: -1rem;
    display: flex;
    margin-right: -1rem;
}

    .card-badge > *:not(:first-child):last-child {
        padding-right: 1rem;
    }

    .card-badge > * {
        padding: 0.2rem 0.5rem;
        height: 1.6rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .card-badge, .card-badge > :first-child {
        border-top-left-radius: 0.25rem;
    }

        .card-badge, .card-badge > :last-child {
            border-bottom-right-radius: 0.25rem;
        }

/***********************************
    Number block
************************************/

.number-block {
    display: inline-block;
    margin-right: 0.5rem;
    width: 1.2em;
    height: 1.2em;
    background: black;
    text-align: center;
    color: white;
    line-height: 1.2;
    border-radius: 0.1em;
}

/***********************************
    Payment button
************************************/

.payment-btn, .payment-banner {
    border-radius: 0.5rem;
    position: relative;
    margin-bottom: 0.2rem;
    padding-top: 40%;
    background-size: contain;
    box-shadow: 0.2rem 0.2rem 0.3rem rgba(0,0,0,.1);
}

    .payment-btn > *, .payment-banner > * {
        position: absolute;
        top: 0;
        left: 0;
    }

    .payment-btn .spinner {
        background: rgba(0,0,0,0.2);
        position: absolute;
        top: 0px;
        left: 0px;
        border-radius: 0.5rem;
        color: white;
        font-size: 3rem;
    }

    .payment-btn:active {
        top: 0.2rem;
        left: 0.2rem;
        border: 1px solid #cccccc;
        box-shadow: none;
        margin-bottom: 0;
    }

    .payment-btn:not(:active) {
        top: 0px;
        left: 0px;
    }



.btn-circle-icon {
    background: lightgray;
    line-height: 1;
    height: 2em;
    width: 2em;
    border-radius: 1em;
    padding: 0.5em;
    text-align: center;
    display: inline-block;
}

/***********************************
    LeaPA
************************************/

.leapa-selector select {
    border: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    background-image: url('data:image/png;base64,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');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 1rem);
    background-size: 1rem;
    background-position-y: 0.5rem;
    margin: auto;
    width: unset;
    padding-right: 2.5rem;
    font-weight: bold;
}

/***********************************
    date-picker
************************************/

input[type="date"].date-picker, input[type="month"].date-picker {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0 !important;
    width: 100vw; /* iPhone 上面要這樣才行 */
}

    input[type="date"].date-picker::-webkit-clear-button, input[type="date"].date-picker::-webkit-inner-spin-button,
    input[type="month"].date-picker::-webkit-clear-button, input[type="month"].date-picker::-webkit-inner-spin-button {
        display: none;
        -webkit-appearance: none;
    }

    input[type="date"].date-picker::-webkit-calendar-picker-indicator, input[type="month"].date-picker::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

/***********************************
    input-group
************************************/

.input-group {
    position: relative;
}

    .input-group .input-group-prepend,
    .input-group .input-group-append {
        position: absolute;
        top: .75rem;
        z-index: 10;
    }

.input-group-prepend {
    left: 1rem;
}

    .input-group-prepend + .form-control {
        padding-left: 2.5rem;
    }

.input-group-append {
    right: 1rem;
}

.form-control {
    border-radius: 1.5rem !important;
}

/***********************************
    merchant
************************************/

:root {
    --leapa-merchant-height: (100vh - 19.5rem) / 2;
}

.snap-layout {
    --leapa-merchant-height: 9rem;
    height: 99.9vh;
    max-height: 99.9vh;
    height: 99.9dvh;
    max-height: 99.9dvh;
    width: 100%;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

.snap-page {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.text-fit-footer {
    font-size: 85%;
    font-weight: bolder;
}

.bg-radial {
    background-image: url(/img/leapa/bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}