/**
 * [RKR ONE CLICK INSTANT BUY] - One-click modal styles.
 * The modal inherits the theme custom properties published inside its own
 * root (.rkrocib-modal-root), so every preset applies without recompiling.
 */

.rkrocib-modal-root { position: relative; }

.rkrocib-modal-root[aria-hidden="true"] { display: none; }

body.rkrocib-locked { overflow: hidden; }

.rkrocib-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(12, 14, 16, 0.55);
    backdrop-filter: blur(var(--rkrocib-blur, 0px));
    animation: rkrocib-overlay-in 0.2s ease;
}

@keyframes rkrocib-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rkrocib-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: calc(100% - 24px);
    max-width: var(--rkrocib-modal-width, 560px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border: 1px solid var(--rkrocib-border-color, #d9d9d9);
    border-radius: var(--rkrocib-modal-radius, 16px);
    background: var(--rkrocib-surface, #ffffff);
    color: var(--rkrocib-text, #232323);
    font-family: var(--rkrocib-font-family, inherit);
    font-size: var(--rkrocib-font-size, 15px);
    box-shadow: var(--rkrocib-shadow, 0 6px 18px rgba(0, 0, 0, 0.12));
}

/* ---------------------------------------------------------- animations */

@keyframes rkrocib-anim-zoom-kf {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes rkrocib-anim-fade-kf {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rkrocib-anim-slide-kf {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.rkrocib-anim-zoom { animation: rkrocib-anim-zoom-kf 0.32s ease; }
.rkrocib-anim-fade { animation: rkrocib-anim-fade-kf 0.34s ease; }
.rkrocib-anim-slide { animation: rkrocib-anim-slide-kf 0.32s ease; }
.rkrocib-anim-none { animation: none; }

/* ---------------------------------------------------------------- head */

.rkrocib-modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--rkrocib-primary, #77a632);
    background-image: var(--rkrocib-gradient, none);
    color: var(--rkrocib-primary-contrast, #ffffff);
    border-radius: calc(var(--rkrocib-modal-radius, 16px) - 1px) calc(var(--rkrocib-modal-radius, 16px) - 1px) 0 0;
}

.rkrocib-modal-head-title { font-weight: 700; font-size: 15.5px; flex: 1; }

.rkrocib-modal-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.rkrocib-modal-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------------------------------------------------------------- body */

.rkrocib-modal-form { padding: 6px 18px 18px; }

.rkrocib-modal-section {
    padding: 14px 0 4px;
    border-bottom: 1px dashed var(--rkrocib-border-color, #d9d9d9);
}

.rkrocib-modal-section:last-of-type { border-bottom: 0; }

.rkrocib-modal-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--rkrocib-muted, #6b6b6b);
}

.rkrocib-modal-logged {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--rkrocib-muted, #6b6b6b);
}

.rkrocib-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}

.rkrocib-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rkrocib-field-full { grid-column: 1 / -1; }

.rkrocib-field label {
    display: block;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--rkrocib-text, #232323);
}

.rkrocib-field input,
.rkrocib-field select,
.rkrocib-field textarea {
    padding: 9px 11px;
    border: 1px solid var(--rkrocib-border-color, #d9d9d9);
    border-radius: var(--rkrocib-border-radius, 10px);
    background: var(--rkrocib-bg, #ffffff);
    color: var(--rkrocib-text, #232323);
    font: inherit;
    font-size: 13.5px;
}

.rkrocib-field input:focus,
.rkrocib-field select:focus,
.rkrocib-field textarea:focus {
    outline: none;
    border-color: var(--rkrocib-primary, #77a632);
    box-shadow: 0 0 0 3px rgba(119, 166, 50, 0.16);
}

.rkrocib-field textarea { resize: vertical; }

.rkrocib-field input.rkrocib-invalid,
.rkrocib-field select.rkrocib-invalid {
    border-color: #c43e3e;
    box-shadow: 0 0 0 3px rgba(196, 62, 62, 0.14);
}

.rkrocib-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ------------------------------------------------------------- address */

.rkrocib-address-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--rkrocib-border-color, #d9d9d9);
    border-radius: var(--rkrocib-border-radius, 10px);
    background: var(--rkrocib-bg, #ffffff);
    color: var(--rkrocib-primary, #77a632);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.rkrocib-address-toggle:hover { border-color: var(--rkrocib-primary, #77a632); }

.rkrocib-address-toggle-icon {
    display: inline-flex;
    transition: transform 0.18s ease;
}

.rkrocib-address-toggle[aria-expanded="true"] .rkrocib-address-toggle-icon {
    transform: rotate(180deg);
}

.rkrocib-address-body { padding-top: 12px; }
.rkrocib-address-new { padding-top: 10px; }

/* ----------------------------------------------------------- carriers */

.rkrocib-carrier-list { display: flex; flex-direction: column; gap: 8px; }

.rkrocib-carrier-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--rkrocib-border-color, #d9d9d9);
    border-radius: var(--rkrocib-border-radius, 10px);
    background: var(--rkrocib-bg, #ffffff);
    cursor: pointer;
    font-size: 13.5px;
}

.rkrocib-carrier-option.is-checked {
    border-color: var(--rkrocib-primary, #77a632);
    box-shadow: 0 0 0 2px rgba(119, 166, 50, 0.18);
}

.rkrocib-carrier-option input { accent-color: var(--rkrocib-primary, #77a632); }
.rkrocib-carrier-name { flex: 1; font-weight: 600; }
.rkrocib-carrier-delay { color: var(--rkrocib-muted, #6b6b6b); font-size: 12px; }
.rkrocib-carrier-price { font-weight: 700; color: var(--rkrocib-primary, #77a632); }

/* ----------------------------------------------------------- gateways */

.rkrocib-gateway-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.rkrocib-gateway-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--rkrocib-border-color, #d9d9d9);
    border-radius: var(--rkrocib-border-radius, 10px);
    background: var(--rkrocib-bg, #ffffff);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.rkrocib-gateway-option input { accent-color: var(--rkrocib-primary, #77a632); }

.rkrocib-gateway-option.is-checked {
    border-color: var(--rkrocib-primary, #77a632);
    box-shadow: 0 0 0 2px rgba(119, 166, 50, 0.18);
}

.rkrocib-gateway-option.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rkrocib-gateway-option-logo { display: inline-flex; }
.rkrocib-gateway-option-logo img { max-height: 26px; max-width: 44px; }
.rkrocib-gateway-option-fallback { display: inline-flex; color: var(--rkrocib-muted, #6b6b6b); }

.rkrocib-gateway-option-note {
    position: absolute;
    right: 8px;
    bottom: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #b06a12;
}

.rkrocib-modal-empty {
    margin: 0;
    padding: 12px;
    border-radius: var(--rkrocib-border-radius, 10px);
    background: var(--rkrocib-bg, #ffffff);
    border: 1px dashed var(--rkrocib-border-color, #d9d9d9);
    color: var(--rkrocib-muted, #6b6b6b);
    font-size: 13px;
}

/* -------------------------------------------------------------- gdpr */

.rkrocib-modal-gdpr-text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--rkrocib-muted, #6b6b6b);
}

.rkrocib-modal-gdpr-text p { margin: 0 0 6px; }

/* -------------------------------------------------------------- foot */

.rkrocib-modal-foot { padding: 14px 0 4px; }

.rkrocib-modal-deferred {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--rkrocib-muted, #6b6b6b);
}

.rkrocib-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.rkrocib-btn-secondary,
.rkrocib-btn-primary {
    padding: 11px 20px;
    border: 0;
    border-radius: var(--rkrocib-border-radius, 10px);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.rkrocib-btn-secondary {
    background: transparent;
    color: var(--rkrocib-muted, #6b6b6b);
    border: 1px solid var(--rkrocib-border-color, #d9d9d9);
}

.rkrocib-btn-primary {
    background: var(--rkrocib-primary, #77a632);
    background-image: var(--rkrocib-gradient, none);
    color: var(--rkrocib-primary-contrast, #ffffff);
    box-shadow: var(--rkrocib-shadow, 0 6px 18px rgba(0, 0, 0, 0.12));
}

.rkrocib-btn-primary:hover { background-color: var(--rkrocib-primary-hover, #5f8528); }
.rkrocib-btn-primary[disabled] { opacity: 0.65; cursor: wait; }

/* ------------------------------------------------------------ errors */

.rkrocib-modal-errors {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: var(--rkrocib-border-radius, 10px);
    background: #fdecec;
    color: #9c2f2f;
    font-size: 13px;
    font-weight: 600;
}

.rkrocib-modal-errors ul { margin: 4px 0 0; padding-left: 18px; }

/* -------------------------------------------------------- responsive */

@media (max-width: 560px) {
    .rkrocib-field-grid,
    .rkrocib-gateway-list { grid-template-columns: 1fr; }

    .rkrocib-modal-actions { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
    .rkrocib-modal,
    .rkrocib-overlay { animation: none; }
}

/* Required / optional markers of the modal labels. */
.rkrocib-req { color: var(--rkrocib-primary, #77a632); font-weight: 800; margin-left: 3px; }
.rkrocib-opt { color: var(--rkrocib-muted, #6b6b6b); font-size: 11px; font-weight: 600; margin-left: 4px; }