/* General order card styling.

Specific order card styling is done under the scope selector
`.order-card.order-card--<product kind>` which should be defined for each
specific product kind.
*/

.order-card {
    --card-color: var(--orange);
    --header-color: white;
    --header-color-dimmed: rgb(255, 255, 255, 0.6);
}

.order-card {
    border: 1px solid var(--card-color);
    border-radius: 3px;
    margin: 1rem 0;
}

.order-card.collapsable .product-info {
    cursor: pointer;
}

.order-card:not(.collapsed) {
    box-shadow: 0px 10px 25px #ddd;
}

.order-card.collapsed {
    --card-color: #ccc;
    --header-color: var(--font-color);
    --header-color-dimmed: rgb(0, 0, 0, 0.4);
}

.order-card.collapsed:hover {
    border-color: #aaa;
    outline: 3px solid #ddd;
}

.order-card.collapsed > :not(.product-info) {
    display: none !important;
}

.order-card h2 {
    font-size: 140%;
}

.order-card .product-id, .order-card .dakopstand-id {
  font-weight: bold;
}

.order-card .product-header {
    background-color: var(--card-color);
    color: var(--header-color);
    padding: 1rem;
    display: grid;
    grid-template-columns: 4rem 1fr 18rem;
}

.order-card .product-header > .price {
    text-align: right;
}

.order-card .product-header .price-formula {
    color: var(--header-color-dimmed);
}

.order-card .product-details {
    background: var(--light-marker--highlight);
    color: var(--darker-marker);
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.order-card .product-details .value {
  font-weight: bold;
}

.order-card .product-details > .details {
  display: flex;
  justify-content: space-between;
}


.order-card .product-options {
    margin: 1rem;
}

/* Visibility for order-card-questions.js (hide/show questions and options) */
.order-card .hidden_option {
    display: none !important;
}
.order-card .hidden_question {
    display: none !important;
}
.order-card .fully_hidden_question {
    display: none !important;
}

.order-card .order-actions {
    margin: 1rem;
    text-align: right;
}


/* Order card view styling

Specifically styled to ease printing to PDF.
*/

/* Hide product options */
.order-card-view .product-options {
    display: none;
}

@media print {
    html.order-card-view {
        font-size: 14px;
    }

    .order-card-view * {
        /* Force background colors to be printed exact; otherwise browser may omit them */
        -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
        print-color-adjust: exact !important;  /*Firefox*/
    }

    .order-card-view .no-print {
        display: none;
    }

    .order-card-view .main {
        max-width: none;
        margin: 0;
    }

    .order-card-view footer {
        margin-top: 1rem;
        max-width: none;
    }

    .order-card-view .order-card {
        margin: 0;
        box-shadow: none;
    }

    /* Always hide product options when printing (controls don't print well) */
    .order-card-view .product-options {
        display: none;
    }
}

/* Used to create further columns WITHIN a section of the order card */
.order-card .columns {
    display:flex;
    flex-flow: row nowrap;
}

.order-card.order-card--diffuser .product-blurb .captioned-image {
    display: flex;
    flex-flow: column nowrap;
    margin-bottom:1rem;
}

.order-card.order-card--diffuser .product-blurb .captioned-image .caption {
    display:block;
    width: 100%;
    font-style:italic;
}

.order-card.order-card--diffuser .product-blurb img.full-width {
    width: calc(100% - 0.5rem);
}

.order-card.order-card--diffuser .product-blurb img.full-width.narrower {
    margin-left:2rem;
    margin-right:2rem;
    width: calc(100% - 4.5rem);
}