/* =============================================================================
   coupons.css - Coupons addon styles

   Linked after theme.css. The code field: a "Have a discount code?" link
   that reveals an input group (the input and its Apply button on one line,
   at the same height, in the theme's form styles), the refusal under it in
   the error color and, once a code is applied, a green line with a Remove
   link. Then the admin filters, the sections and help lines of the admin
   form with its target picker, its one-line preview and the status of
   each code on the list.
   Built from the style.css and theme.css tokens, so it follows the theme
   and dark mode.
   ============================================================================= */

/* The field leaves comfortable room before whatever follows it (a consent
   box, a buy button) */
.coupons-field {
    margin-bottom: 24px;
}

/* A button drawn as a link: the reveal link and Remove */
.coupons-field .coupons-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--black);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(var(--black-rgb), .4);
    text-underline-offset: 4px;
    cursor: pointer;
}

.coupons-field .coupons-link:not([disabled]):hover {
    background: transparent;
    background-image: none;
    text-decoration-color: var(--black);
}

.coupons-group {
    margin-top: 8px;
}

/* The label stays for screen readers; the placeholder names the field on
   screen */
.coupons-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* The input and Apply share one line at every width; the button stretches
   to the input's height */
.coupons-row {
    display: flex;
    align-items: stretch;
}

.coupons-field .coupons-row input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    margin-inline-end: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* The placeholder reads as words, not as a code */
.coupons-field .coupons-row input::placeholder {
    text-transform: none;
    letter-spacing: normal;
}

.coupons-field .coupons-row button {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

.coupons-message {
    margin: 8px 0 0 0;
    font-size: .85rem;
}

.coupons-message-error {
    color: var(--error-text);
}

/* The applied code: a soft green line with the Remove link at its end */
.coupons-applied {
    margin: 0;
    padding: 8px 12px;
    border-inline-start: 4px solid var(--green);
    border-radius: var(--radius);
    background: rgba(var(--green-rgb), .12);
    color: var(--black);
}

.coupons-applied-text {
    margin-inline-end: 8px;
    font-weight: 600;
}

.coupons-legend {
    margin: 16px 0 8px 0;
    font-weight: 600;
}

/* "Where it works": its heading with the Clear button at the end */
.coupons-where-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 8px 0;
}

.coupons-where-head .coupons-legend {
    margin: 0;
}

.coupons-where-head button {
    margin: 0;
    margin-inline-start: 12px;
}

/* The list to tick: the whole type's row first and its items under it,
   each a checkbox with its name. A long list scrolls inside its own
   box. */
.coupons-targets {
    max-height: 360px;
    margin: 0 0 16px 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    list-style: none;
}

.coupons-target {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.coupons-target:last-child {
    border-bottom: 0;
}

.coupons-target-type {
    background: rgba(var(--gray-rgb), .08);
    font-weight: 600;
}

.coupons-target:not(.coupons-target-type) .coupons-target-check {
    padding-inline-start: 24px;
}

.coupons-targets .coupons-target-check {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: inherit;
}

.coupons-target-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.coupons-check {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 400;
}

.coupons-check input {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    margin-inline-end: 8px;
}

.coupons-filters {
    margin: 16px 0;
}

/* The admin form: one card per section, each control with a short help
   line under it, tucked up against the control's own bottom margin */
.coupons-section {
    margin-bottom: 24px;
}

.coupons-help {
    margin: -8px 0 16px 0;
    color: var(--gray);
    font-size: .85rem;
}

.coupons-check + .coupons-help,
.coupons-legend + .coupons-help,
legend + .coupons-help {
    margin-top: 0;
}

/* The code and its Generate button on one line */
.coupons-code-row {
    display: flex;
    align-items: flex-start;
}

.coupons-code-row input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-inline-end: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.coupons-code-row button {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

/* An amount with its unit (%, the currency) after it */
.coupons-unit-row {
    display: flex;
    align-items: flex-start;
    max-width: 320px;
}

.coupons-unit-row input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-inline-end: 8px;
}

.coupons-unit {
    flex: 0 0 auto;
    padding-top: 8px;
    font-weight: 600;
}

/* Start and end side by side from tablet width */
.coupons-pair {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.coupons-pair > .custom-column {
    flex: 0 0 100%;
    min-width: 0;
}

.coupons-pair .inner-column {
    padding: 0 8px;
}

@media (min-width: 768px) {
    .coupons-pair > .custom-column {
        flex: 0 0 50%;
    }
}

/* The sentence that says what the code will do */
.coupons-preview {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    border-inline-start: 4px solid var(--blue);
    border-radius: var(--radius);
    background: rgba(var(--blue-rgb), .08);
    color: var(--black);
}

/* A code's status on the list */
.coupons-status {
    display: inline-block;
    padding: 4px 8px;
    border-inline-start: 4px solid var(--gray);
    border-radius: var(--radius);
    background: rgba(var(--gray-rgb), .12);
    color: var(--black);
    font-size: .85rem;
    white-space: nowrap;
}

.coupons-status-active {
    border-inline-start-color: var(--green);
    background: rgba(var(--green-rgb), .12);
}

.coupons-status-scheduled {
    border-inline-start-color: var(--blue);
    background: rgba(var(--blue-rgb), .12);
}

.coupons-status-used_up,
.coupons-status-expired {
    border-inline-start-color: var(--amber);
    background: rgba(var(--amber-rgb), .12);
}

.coupons-nowrap {
    white-space: nowrap;
}