/* IVN checkout visual refresh — overrides Simple checkout module default styling.
   Field/block placement is untouched; this file only restyles existing markup. */

.simple-content { font-family: 'Montserrat', sans-serif; color: #241F1F; }

/* The generic .rm-content wrapper (used sitewide for account/CMS pages) adds
   its own white card + padding + border around whatever it holds. On the
   checkout page that creates a second, page-wide white panel behind our own
   cards. Strip it back to the plain gray page background here. */
.rm-content:has(> .simple-content) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* The sitewide fixed right-side icon bar (.oct-fixed-bar, cart/compare/
   wishlist/viewed) sits 64px from the viewport edge regardless of container
   width. Keep the checkout content clear of it. */
@media (min-width: 992px) {
    .simple-content { padding-right: 84px; box-sizing: border-box; }
}

.simple-content fieldset { border: none !important; margin: 0 !important; padding: 0 !important; }

/* Card containers */
.simple-content .simplecheckout-block {
    background: #ffffff;
    border: 1px solid #ECECF1;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20,20,30,.04);
    margin-bottom: 24px;
}

.simple-content .checkout-heading,
.simple-content .checkout-heading.panel-heading {
    background: #ffffff !important;
    border: none !important;
    border-radius: 14px 14px 0 0 !important;
    color: #241F1F !important;
    font-weight: 700;
    font-size: 17px;
    padding: 28px 28px 0 !important;
    margin-bottom: 22px;
}
.simple-content .checkout-heading span { font-weight: 700; }
.simple-content .checkout-heading {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.simple-content .ivn-heading-icon {
    flex: 0 0 auto;
    color: #656C7D;
}
.simple-content .checkout-heading-button {
    margin-left: auto !important;
    float: none !important;
}
.simple-content .checkout-heading-button a { color: #8A8A93; font-size: 13px; font-weight: 500; text-decoration: none; }
.simple-content .checkout-heading-button a:hover { color: #E0574A; }

.simple-content .simplecheckout-block-content {
    padding: 0 28px 28px;
}
.simple-content .simplecheckout-block > .simplecheckout-block-content:first-child,
.simple-content .simplecheckout-block > .alert:first-child + .simplecheckout-block-content {
    padding-top: 28px;
}
#simplecheckout_customer.simplecheckout-block .simplecheckout-block-content {
    text-align: left;
}

/* Inputs */
.simple-content .form-control {
    border: 1.5px solid #E2E2E8;
    border-radius: 10px;
    padding: 12px 14px;
    height: auto;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
    color: #241F1F;
}
.simple-content .form-control:focus {
    border-color: #FB9130;
    box-shadow: 0 0 0 3px rgba(251,145,48,.15);
    outline: none;
}
.simple-content label { font-size: 13px; font-weight: 700; color: #51515B; }

/* The theme's own .form-horizontal label.control-label.col-sm-4 rule is more
   specific than a plain "label" selector and wins the cascade (font-size:16px,
   Bootstrap's side-by-side label|input columns) — override it explicitly and
   stack label-above-input like the rest of the form. */
.simple-content .form-horizontal .control-label,
.simple-content label.control-label.col-sm-4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #51515B !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    text-align: left !important;
}
.simple-content .form-horizontal .form-group {
    display: flex;
    flex-direction: column;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}
.simple-content .form-horizontal .form-group > div[class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}
.simple-content .simplecheckout-required { color: #E0574A; font-weight: 700; }

/* Radio option rows (delivery / payment) */
.simple-content .radio {
    border: 1.5px solid #E7E7EC;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 10px;
    transition: border-color .15s, background-color .15s;
}
.simple-content .radio:last-child { margin-bottom: 0; }
.simple-content .radio:hover { border-color: #C9CDD6; }
.simple-content .radio label {
    font-weight: 700;
    font-size: 14px;
    color: #241F1F;
    margin: 0;
    cursor: pointer;
    display: block !important;
}
.simple-content .radio input[type="radio"] {
    accent-color: #656C7D;
    width: 18px;
    height: 18px;
    margin-right: 12px;
    vertical-align: middle;
}
.simple-content .radio:has(input:checked) {
    border-color: #656C7D;
    background: #F6F7F9;
}

/* "Нова Пошта" style rows carry a sibling .form-group description
   (e.g. "Термін доставки — 1 день") — visually merge it into the same card,
   matching the stacked title/subtitle look in the mockup. */
#simplecheckout_shipping .radio:has(+ .form-group) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    padding-bottom: 6px;
    margin-bottom: 0;
}
#simplecheckout_shipping .radio + .form-group {
    border: 1.5px solid #E7E7EC;
    border-top: none;
    border-radius: 0 0 10px 10px;
    margin: 0 0 10px;
    padding: 0 16px 14px 46px;
}
#simplecheckout_shipping .radio + .form-group label {
    font-size: 12.5px;
    font-weight: 400;
    color: #8A8A93;
    margin: 0;
    cursor: default;
}

/* Cart items — card rows (replaces the old narrow multi-column table) */
.simple-content .ivn-cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
}
.simple-content .ivn-cart-item {
    padding-bottom: 16px;
    border-bottom: 1px solid #F0F0F3;
}
.simple-content .ivn-cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.simple-content .ivn-cart-item-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.simple-content .ivn-cart-item-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 13px;
}
.simple-content .ivn-cart-item-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1px solid #ECECF1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.simple-content .ivn-cart-item-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.simple-content .ivn-cart-item-info {
    flex: 1 1 auto;
    min-width: 0;
}
.simple-content .ivn-cart-item-name {
    font-size: 14px;
    font-weight: 700;
    color: #241F1F;
    text-decoration: none;
    display: block;
    line-height: 1.35;
}
.simple-content a.ivn-cart-item-name:hover { color: #FB9130; }
.simple-content .ivn-cart-item-model {
    font-size: 12.5px;
    color: #8A8A93;
    margin-top: 4px;
}
.simple-content .ivn-cart-item .options { margin: 0; }
.simple-content .ivn-cart-item .options small { color: #8A8A93; font-size: 12px; }
.simple-content .ivn-cart-item .product-warning { color: #E0574A; margin-left: 4px; }
.simple-content .ivn-cart-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #F0F0F3;
    gap: 12px;
    flex-wrap: wrap;
}
.simple-content .ivn-cart-item-footer .input-group {
    display: flex !important;
    align-items: center;
    gap: 6px;
}
.simple-content .ivn-cart-item-footer .btn {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
}
.simple-content .ivn-cart-item-footer .form-control {
    width: 36px;
    min-width: 36px;
    text-align: center;
    padding: 6px 2px !important;
    flex: 0 0 auto;
}
.simple-content .ivn-cart-item-price {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}
.simple-content .ivn-cart-item-price-old {
    text-decoration: line-through;
    color: #B5B5BD;
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}
.simple-content .ivn-cart-item .btn-danger {
    background: #ffffff !important;
    border: 1.5px solid #E2E2E8 !important;
    color: #B5B5BD !important;
    box-shadow: none !important;
}
.simple-content .ivn-cart-item .btn-danger:hover {
    border-color: #E0574A !important;
    color: #E0574A !important;
    background: #FFF4F3 !important;
}
.simple-content .ivn-cart-item .btn-primary {
    background: #ffffff !important;
    border: 1.5px solid #E2E2E8 !important;
    color: #51515B !important;
    box-shadow: none !important;
}
.simple-content .ivn-cart-item .btn-primary:hover {
    border-color: #C9CDD6 !important;
    background: #F6F7F9 !important;
}
.simple-content .ivn-cart-recurring {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    color: #51515B;
}

/* Totals */
.simple-content .simplecheckout-cart-total {
    border: none !important;
    font-size: 13.5px;
    color: #51515B;
    padding: 4px 28px;
}
.simple-content .simplecheckout-cart-total:first-of-type {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #F0F0F3 !important;
}
.simple-content .simplecheckout-cart-total:last-of-type {
    padding-bottom: 28px;
}
.simple-content #total_total.simplecheckout-cart-total {
    font-size: 16px;
    font-weight: 700;
    color: #241F1F;
}

/* Primary action buttons */
.simple-content .simplecheckout-button-block {
    background: transparent;
    padding: 0;
}
.simple-content .simplecheckout-button-block .btn-primary,
.simple-content .simplecheckout-button-block .button_oc {
    background: #479F50 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    font-weight: 700;
    font-size: 15px;
    text-align: center !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.simple-content .simplecheckout-button-block .btn-primary span,
.simple-content .simplecheckout-button-block .button_oc span {
    line-height: normal !important;
}
.simple-content .simplecheckout-button-block .btn-primary:hover,
.simple-content .simplecheckout-button-block .button_oc:hover {
    background: #54B95F !important;
}

/* Textarea (comment) */
.simple-content textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

/* Address/department autocomplete suggestion list (Nova Poshta / Ukrposhta
   address field) — bare unstyled <ul><li><a> by default, browser-blue
   highlight on hover. Match the rest of the card design system. */
.simple-content .dropdown-address {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #ECECF1;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(20,20,30,.08);
    max-height: 280px;
    overflow-y: auto;
    z-index: 20;
}
.simple-content .dropdown-address li {
    margin: 0;
}
.simple-content .dropdown-address li a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #241F1F;
    text-decoration: none !important;
}
.simple-content .dropdown-address li a:hover,
.simple-content .dropdown-address li a:focus,
.simple-content .dropdown-address li.active a,
.simple-content .dropdown-address li.selected a {
    background: #F6F7F9;
    color: #241F1F;
}