/* Background */
.nicepay-background-color {
    background-color: var(--background-color);
}

.nicepay-header-background-color {
   background-color: var(--header-background-color);     
}

@media (min-width: 768px) {
    .border-md-right {
        border-right: 1px solid #dee2e6;
    }
    .border-md-left {
        border-left: 1px solid #dee2e6;
    }
}

.border-top-dashed {
    border-top: 1px dashed #E7E4E5;
}

.hover-bg-neutral-05:hover {
    background-color: var(--color-neutral-05);
    cursor: pointer;
}

.bg-turquoise-30 {
    background-color: var(--color-turquoise-30);
}

.bg-yellow-10 {
    background-color: var(--color-yellow-10);
}

.bg-yellow-50 {
    background-color: var(--color-yellow-50);
}

.border-yellow-50 {
    border: 1px solid var(--color-yellow-50);
}

.nicepay-rounded {
    border-radius: 8px;
}

.nicepay-shadow {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.03);
}

.nicepay-border {
    border: 1px solid var(--color-neutral-20);
}

.nicepay-border-neutral-30 {
    border: 1px solid var(--color-neutral-30);
}

@media (min-width: 768px) {
    .border-bottom-nicepay {
        border-bottom: 1px solid var(--color-neutral-20);
    }
}

@media (max-width: 767.98px) {
    .border-bottom-nicepay {
        border-bottom: 1px solid var(--color-neutral-20);
        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.03);
    }
}

@media (min-width: 768px) {
    .border-bottom-sm-only {
        border-bottom: none !important;
    }
}

@media (max-width: 767.98px) {
    .border-bottom-sm-only {
        border-bottom: 1px solid var(--color-neutral-20);
    }
}

.step-number {
    width: 24px;
    height: 24px;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.loading-icon {
    margin: 48px;
    animation: spin 1s linear infinite;
    transform-origin: center;
}

/* Tab */
.nav-link.active {
    border-bottom: 3px solid var(--button-color) !important;
    color: var(--color-neutral-80) !important;
    font-weight: var(--font-weight-bold);
}

.nav-link {
    color: var(--color-neutral-50);
    font-weight: var(--font-weight-medium);
}

/* Validations */

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7.35034%200.703735C8.8883%200.397905%2010.4789%200.526365%2011.9451%201.07092L12.2371%201.18518C13.686%201.78537%2014.9376%202.77598%2015.8542%204.04358L16.033%204.30042C16.9623%205.69129%2017.4587%207.32685%2017.4587%208.99963L17.448%209.41858C17.3496%2011.3694%2016.5785%2013.2266%2015.2673%2014.6744L14.9783%2014.9781C13.3924%2016.564%2011.2425%2017.4565%208.99976%2017.4586L8.68726%2017.4528C7.22804%2017.3988%205.8075%2016.9676%204.56421%2016.2018L4.30054%2016.0328C2.9967%2015.1616%201.96295%2013.9459%201.31128%2012.524L1.1853%2012.2369C0.585086%2010.7879%200.400923%209.20238%200.64917%207.65784L0.703857%207.35022C1.03022%205.70946%201.83637%204.20208%203.01929%203.01917C4.12821%201.91024%205.52194%201.1329%207.0437%200.771118L7.35034%200.703735ZM8.99976%200.791626C7.47808%200.791687%205.98838%201.21457%204.69604%202.01038L4.44019%202.17542C3.17478%203.02093%202.17029%204.19982%201.53784%205.57971L1.41675%205.85901C0.834336%207.26515%200.654401%208.80358%200.895264%2010.3024L0.949951%2010.6012C1.2469%2012.094%201.95206%2013.4731%202.98511%2014.5856L3.19604%2014.8043C4.27214%2015.8804%205.62466%2016.6349%207.10132%2016.986L7.39917%2017.0504C8.89169%2017.3472%2010.4353%2017.2234%2011.8582%2016.6949L12.1414%2016.5836C13.5473%2016.0012%2014.7616%2015.0401%2015.6511%2013.8102L15.825%2013.5602C16.7269%2012.2103%2017.2087%2010.6231%2017.2087%208.99963L17.198%208.59241C17.0953%206.56455%2016.2441%204.64042%2014.8015%203.19788C13.3591%201.75561%2011.4355%200.905129%209.40796%200.802368L9.00073%200.791626H8.99976Z%22%20fill%3D%22%23444041%22%20stroke%3D%22%23F04438%22%2F%3E%3Cpath%20d%3D%22M8.99976%205.11658C9.06608%205.11658%209.13093%205.13597%209.1853%205.17224L9.23608%205.21423C9.29842%205.27665%209.33365%205.36137%209.33374%205.44958V9.33337C9.33371%209.39963%209.31332%209.46362%209.2771%209.51794L9.23608%209.56873C9.17357%209.63124%209.08816%209.66638%208.99976%209.66638C8.9336%209.66632%208.86944%209.64687%208.81519%209.61072L8.7644%209.56873C8.70198%209.50625%208.66678%209.42169%208.66675%209.33337V5.44958C8.66681%205.38347%208.6863%205.31925%208.72241%205.26501L8.7644%205.21423C8.82684%205.1518%208.91147%205.11666%208.99976%205.11658Z%22%20fill%3D%22%23444041%22%20stroke%3D%22%23F04438%22%2F%3E%3Cpath%20d%3D%22M9.00049%2011.7999C9.29949%2011.8001%209.5415%2012.0429%209.5415%2012.3419C9.54133%2012.6408%209.29938%2012.8828%209.00049%2012.8829C8.70144%2012.8829%208.45867%2012.6409%208.4585%2012.3419C8.4585%2012.0428%208.70133%2011.7999%209.00049%2011.7999Z%22%20fill%3D%22%23444041%22%20stroke%3D%22%23F04438%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.1875rem);
    background-size: calc(0.75em + 0.375rem);
}

/* Modal */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 575.98px) {
    .modal.modal-bottom-sheet {
        padding: 0 !important;
    }

    .modal.modal-bottom-sheet .modal-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        display: flex !important;
        align-items: flex-end !important;
        pointer-events: none;
    }

    .modal.modal-bottom-sheet .modal-content {
        border-radius: 12px 12px 0 0;
        width: 100%;
        animation: slideUp 0.3s ease-out;
        pointer-events: auto;
    }

    .modal.modal-bottom-sheet .modal-header {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
}

.overlay-disabled {
    position: relative;
}

.overlay-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(233 228 228 / 50%);
    pointer-events: none;
    cursor: default;
    border-radius: inherit;
}

/* Dropdown */
.cursor-pointer {
    cursor: pointer;
}

/* Header */
.nicepay-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

@media (min-width: 768px) {
    .nicepay-header {
        position: static;
        border-top-left-radius: 0.50rem;
        border-top-right-radius: 0.50rem;
    }
}

.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merchant-logo {
    height: 48px;
    max-width: 90px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .merchant-logo {
        height: 64px;
        max-width: 200px;
    }
}

/* Button */
.nicepay-primary-button {
    background-color: var(--button-color);
    color: var(--button-font-color);
    border-radius: 4px;
}

.nicepay-primary-button:hover {
    color: var(--button-font-color);
}

.nicepay-primary-button:disabled {
    background-color: color-mix(in srgb, var(--button-color) 30%, white);
    color: color-mix(in srgb, var(--button-font-color) 50%, gray);
}

/* Tooltip */
.tooltip-inner {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Custom tooltip style */
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #f8f9fa;
    /* Light background arrow */
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #f8f9fa;
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #f8f9fa;
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #f8f9fa;
}

/* Partner */
.partner-circle {
    width: 40px;
    height: 40px;
}

@media (max-width: 767.98px) {
    .partner-circle {
        width: 32px;
        height: 32px;
    }
}

/* Custom Margin and Padding */
.pt-40 {
    padding-top: 40px;
}

.pr-32 {
    padding-right: 32px;
}

.pl-32 {
    padding-left: 32px;
}

.p-32 {
    padding: 32px;
}

.p-16 {
    padding: 16px;
}

.py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}

.px-18 {
    padding-left: 18px;
    padding-right: 18px;
}

.my-24 {
    margin-top: 24px;
    margin-bottom: 24px;
}

.mb-20 {
    margin-bottom: 20px;
}

.w-56 {
    width: 56px;
}

@media (max-width: 767.98px) {
    .pt-40 {
        padding-top: 20px;
    }

    .pr-32 {
        padding-right: 16px;
    }

    .pl-32 {
        padding-left: 16px;
    }

    .p-32 {
        padding: 20px;
    }

    .p-16 {
        padding: 12px;
    }

    .py-12 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .my-24 {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .w-56 {
        width: 35px;
    }

    .error-icon {
        height: 80px !important;
        padding: 0 14px;
    }
}

.w-45px {
    width: 45px;
}

.mb-16px {
    margin-bottom: 32px;
}

.mt-20px {
    margin-top: 20px;
}

.min-height-540 {
    min-height: 540px;
}

.h-15 {
    height: 15px;
}

.h-23 {
    height: 23px;
}

.w-12 {
    width: 12px;
}
.w-14 {
    width: 14px;
}

@media (min-width: 767.98px) {
    .w-md-108px {
        width: 108px;
    }

    .mb-md-32px {
        margin-bottom: 32px;
    }

    .min-height-md-663 {
        min-height: 663px;
    }

    .h-md-20 {
        height: 20px;
    }

    .h-md-54 {
        height: 54px;
    }

    .w-md-14 {
        width: 14px;
    }

    .w-md-17 {
        width: 17px;
    }
}

.error-icon {
    height: 132px;
    padding: 0 14px;
}

.input-container {
    width: 100%;
    max-width: 450px;
    padding: 0 20px;
    box-sizing: border-box;
}
.nicepay-form-field {
    position: relative;
    background-color: var(--color-input-bg);
    border-radius: 8px;
    border: 1px solid var(--color-input-idle-border);
    box-sizing: border-box;
    height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    cursor: text;
}

.nicepay-form-field.is-active {
    border-color: var(--color-input-focus-ring);
    box-shadow: 0 0 0 1px var(--color-input-focus-ring);
}
.nicepay-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    /* Default padding */
    padding: 18px 16px 0 16px;
    font-size: var(--font-body1-size);
    color: var(--color-input-text);
    font-weight: 500;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
}

.input-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-input-label-idle);
    font-size: var(--font-body1-size);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    transform-origin: top left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 32px);
}
.nicepay-form-field.is-active .input-label,
.nicepay-form-field.has-content .input-label {
    top: 8px;
    transform: translateY(0);
    font-size: var(--font-caption1-size);
    color: var(--color-input-label-focus);
}

.nicepay-input:-webkit-autofill ~ .input-label,
.nicepay-input:-webkit-autofill:hover ~ .input-label,
.nicepay-input:-webkit-autofill:focus ~ .input-label {
    top: 8px;
    font-size: 12px;
    transform: translateY(0);
    color: var(--color-input-label-active, #666);
    z-index: 3 !important;
}

.nicepay-input:-webkit-autofill {
    z-index: 2;
}

.input-icon-group {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    pointer-events: none;
}

.input-icon-group i {
    font-size: 24px;
}
.nicepay-form-field.has-icon .nicepay-input {
    padding-right: 140px;
}

#cvv.nicepay-input {
    padding-right: 50px;
}
.card-logos img {
    width: 24px !important;
    height: auto !important;
}

.input-icon-group.card-logos {
    display: inline-flex;
    align-items: center;
}

.input-icon-group.card-logos img {
    display: none;
}
.input-icon-group.card-logos img {
    width: 36px;
    height: 24px;
    object-fit: none;
    display: block;
}

.nicepay-form-field.has-icon.single-card .nicepay-input {
    padding-right: 60px;
}

.nicepay-form-field.has-icon.no-card .nicepay-input {
    padding-right: 16px;
}

.input-icon-group.card-logos.hidden {
    display: none;
}

.input-group .nicepay-form-field {
    flex: 1;
}

.input-group .nicepay-form-field .nicepay-input {
    padding-left: 16px;
}
.modal .nicepay-form-field {
    margin-bottom: 1rem;
}

.nicepay-form-field .invalid-feedback {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    font-size: var(--font-body2-size);
    color: var(--color-validation-error);
    display: none;
}

.nicepay-form-field.is-invalid .invalid-feedback {
    display: block;
}

/* Handle invalid-feedback when positioned outside nicepay-form-field */
.nicepay-form-field.is-invalid + .invalid-feedback {
    display: block;
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    margin-top: 5px;
    font-size: var(--font-body2-size);
    color: var(--color-validation-error);
}

.nicepay-form-field.is-invalid {
    border-color: var(--color-validation-error);
}

.nicepay-form-field.is-invalid.is-active {
    border-color: var(--color-validation-error);
    box-shadow: 0 0 0 1px var(--color-validation-error);
}

/* Label error state styling */
.nicepay-form-field.is-invalid .input-label {
    color: var(--color-validation-error);
}

.nicepay-form-field.is-invalid.is-active .input-label,
.nicepay-form-field.is-invalid.has-content .input-label {
    color: var(--color-validation-error);
}

.input-group {
    flex-wrap: wrap;
}

.input-group .invalid-feedback {
    flex-basis: 100%;
    width: 100%;
    margin-top: 5px;
    font-size: var(--font-body2-size);
    color: var(--color-validation-error);
    display: none;
}

.input-group .nicepay-form-field.is-invalid ~ .invalid-feedback {
    display: block;
}

.cvv-help-modal .modal-dialog{
    height: 534px;
    max-width: 668px;
    width: 100%;
}

.cvv-help-modal .modal-header {
    padding: 24px 24px 0 24px;
}

.cvv-help-modal .modal-title {
    color: var(--color-neutral-80);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-body1-size);
    line-height: 1.5em;
}

.cvv-help-modal .modal-body {
    padding: 24px;
}

.cvv-help-modal .cvv-illustration {
    background-color: var(--color-cvv-illustration-bg);
    height: 302px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 16px;
}

.cvv-help-modal .cvv-illustration img {
    width: 440px;
    height: 237px;
}

@media (max-width: 480px) {
    .cvv-help-modal .cvv-illustration img {
        width: 90%;
        height: auto;
        max-width: 280px;
    }
}

.cvv-help-modal .cvv-description {
    color: var(--color-neutral-80);
    font-size: var(--font-header4-size);
    font-weight: 500;
    line-height: 1.4em;
    text-align: left;
    margin-bottom: 0;
}

.cvv-help-modal .modal-footer {
    padding: 0 24px 24px 24px;
    border: none;
}

.cvv-help-modal .cvv-understand-button {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid var(--color-cvv-button-border);
    background-color: var(--color-white);
    color: var(--color-cvv-button-text);
    border-radius: 4px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-body1-size);
    line-height: 1.5em;
    transition: all 0.2s ease-in-out;
}

.cvv-help-modal .cvv-understand-button:hover {
    background-color: var(--color-cvv-button-hover-bg);
    border-color: var(--color-cvv-button-hover-border);
}

.cvv-help-modal .cvv-understand-button:focus {
    outline: none;
    box-shadow: unset;
}

#cvv-help-button {
    background: none !important;
    pointer-events: all !important;
}

#cvv-help-button svg {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .cvv-help-modal .modal-body {
        padding: 20px;
    }

    .cvv-help-modal .modal-header {
        padding: 20px 20px 0 20px;
    }

    .cvv-help-modal .modal-footer {
        padding: 0 20px 20px 20px;
    }

    .cvv-help-modal .cvv-illustration {
        height: 250px;
    }

    .cvv-help-modal .cvv-description {
        font-size: 18px;
    }
}

/* Custom Cashtag Input Styles */
.input-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

.input-addons {
    width: 100%;
    padding: 24px 16px 8px 16px;
    font-size: 16px;
    color: #333;
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    height: 60px;
    font-weight: 600;
    line-height: normal;
}

.input-addons:focus,
.input-addons:not(:placeholder-shown) {
    border-color: #52bdc4;
    padding-left: 30px;
}

.input-prefix {
    position: absolute;
    left: 16px;
    top: 26px;
    height: 24px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-addons:focus ~ .input-prefix,
.input-addons:not(:placeholder-shown) ~ .input-prefix {
    opacity: 1;
    transform: translateX(0);
}

.input-label {
    position: absolute;
    left: 16px;
    top: 30px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
    background-color: transparent;
}

.input-addons:focus ~ .input-label,
.input-addons:not(:placeholder-shown) ~ .input-label {
    top: 14px;
    font-size: 12px;
    color: #52bdc4;
    left: 16px;
}

.invalid-feedback {
    display: none;
    color: #e74c3c;
    font-size: 14px;
    margin-top: 6px;
    padding-left: 4px;
}

.input-wrapper.is-error .input-addons {
    border-color: #e74c3c;
}

.input-wrapper.is-error .input-label {
    color: #e74c3c !important;
}

.input-wrapper.is-error .error-message {
    display: block;
}

.input-wrapper.is-error .invalid-feedback {
    display: block;
}

.input-addons.prefix-phone-number {
    padding-left: 46px;
}

/* language dropdown */
div.language-selector {
    position: relative;
    user-select: none;
    width: auto !important;
}

div.selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s;
    color: var(--primary-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    height: auto;
    gap: 4px;
}

.selector-trigger #currentSelection {
    margin-right: 2px;
}

div.selector-trigger:hover {
    border-color: #999;
}

/* Left side of trigger: Icon + Text */
div.trigger-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icons styling */
svg.icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

svg.arrow-down-icon {
    color: #666;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

svg.arrow-up-icon {
    color: #666;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    opacity: 0;
}

div.language-selector.open svg.arrow-down-icon {
    opacity: 0;
}

div.language-selector.open svg.arrow-up-icon {
    opacity: 1;
}

ul.selector-options {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 100%;
    min-width: 200px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1050;
}

/* Open State Class */
div.language-selector.open ul.selector-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* List Items */
li.option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    color: var(--secondary-text);
    font-size: 15px;
    transition: background 0.2s;
    margin: 0;
    line-height: 1.5;
}

li.option-item:hover {
    background-color: var(--hover-bg);
    color: var(--primary-text);
}

li.option-item.selected {
    background-color: var(--active-bg);
    color: var(--active-text);
    font-weight: 500;
}

svg.check-icon {
    width: 18px;
    height: 18px;
    opacity: 0;
    color: var(--active-text);
    flex-shrink: 0;
}

li.option-item.selected svg.check-icon {
    opacity: 1 !important;
}

.btn-back {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.btn-back:hover {
    opacity: 0.7;
}

.btn-back:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.btn-back img {
    display: block;
}

.btn-arrow {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-arrow:hover {
    opacity: 0.7;
}

.btn-arrow img {
    display: block;
}