/* ============================================================
   custom.css — project-specific overrides for l2p-web-pymt
============================================================ */

/* Center the indeterminate progress bar inside the AJAX status dialog.
   text-align:center + inline-block centers horizontally without collapsing
   the content height (flex centering was clipping the bar). */
.status-dialog .ui-dialog-content {
    text-align: center !important;
    padding: 1.5rem !important;
    overflow: visible !important;
}

.status-dialog .ui-progressbar.status-bar-center {
    width: 320px !important;
    max-width: 100% !important;
    height: 10px !important;
    margin: 0 auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

@font-face {
    font-family: 'Public Sans';
    src: url("/secure/javax.faces.resource/fonts/public-sans/static/PublicSans-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Public Sans';
    src: url("/secure/javax.faces.resource/fonts/public-sans/static/PublicSans-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
  font-family: 'Public Sans';
  src: url("/secure/javax.faces.resource/fonts/public-sans/static/PublicSans-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype');
  font-weight: 400;
  font-style: italic;
}

/* l2p-font — composite family: Public Sans for letters/symbols, JetBrains Mono
   for digits (0-9) plus $ and %, split via unicode-range so the browser
   auto-picks those glyphs from JetBrains Mono and everything else from Public Sans. */
@font-face {
    font-family: 'l2p-font';
    src: url("/secure/javax.faces.resource/fonts/public-sans/static/PublicSans-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+00-23, U+26-2F, U+3A-10FFFF;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/secure/javax.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Regular.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+24-25, U+30-39;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/secure/javax.faces.resource/fonts/public-sans/static/PublicSans-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 600;
    font-style: normal;
    unicode-range: U+00-23, U+26-2F, U+3A-10FFFF;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/secure/javax.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Bold.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 600;
    font-style: normal;
    unicode-range: U+24-25, U+30-39;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/secure/javax.faces.resource/fonts/public-sans/static/PublicSans-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: italic;
    unicode-range: U+00-23, U+26-2F, U+3A-10FFFF;
}

@font-face {
    font-family: 'l2p-font';
    src: url("/secure/javax.faces.resource/fonts/JetbrainsMono/JetBrainsMono-Italic.ttf.xhtml?ln=linked2pay-custom") format('truetype');
    font-weight: 400;
    font-style: italic;
    unicode-range: U+24-25, U+30-39;
}

/* Active component-theme color — hardcoded for l2p-web-pymt */
:root {
    --active-theme-color: #26A69A;

    /* Radius */
    --l2p-radius-lg:   1.25rem;  /* 20px — cards            */
    --l2p-radius:      0.5rem;   /* 8px  — (spare)          */
    --l2p-radius-md:   0.375rem; /* 6px  — buttons, inputs  */

    /* Shadow scale — matches Tailwind v4 / shadcn (rgb(0 0 0 / a)) */
    --l2p-shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
    --l2p-shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --l2p-shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* Even, all-around soft shadow — cards, topbar, dialog all share this */
    --l2p-shadow-float: 0 0 12px -2px rgb(0 0 0 / 0.12);
}

body,
body .ui-widget {
  font-family: 'l2p-font', -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
}

body {
	background: #fff;
}

/* Classes for the two-panel custom payment page */
.l2p-payment-page-grid {
	display: flex; 
	justify-content: center; 
	height: calc(100vh - 3rem);
}

.l2p-payment-page-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 2rem;
	padding-right: 2rem
}

.l2p-payment-page-card:first-child {
	border-right: 1px solid #ced4da;
}

/*
    Apply this to a PrimeFaces/JSF input group wrapper when the focus ring
    should surround the whole group instead of the individual focused field.
*/
.l2p-focus-whole-group {
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-shadow: none;
    transition: box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
}

.l2p-focus-whole-group:focus-within {
    border-color: #009688;
    box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.25);
}

.l2p-focus-whole-group:has(.ui-state-error) {
    border-color: #f44336;
    box-shadow: none;
}

.l2p-focus-whole-group:has(.ui-state-error):focus-within {
    border-color: #f44336;
    box-shadow: none;
}

.l2p-focus-whole-group > .ui-inputfield,
.l2p-focus-whole-group > .ui-widget,
.l2p-focus-whole-group > .ui-float-label > .ui-widget,
.l2p-focus-whole-group > .ui-inputgroup-addon,
.l2p-focus-whole-group > .ui-inputgroup-addon-checkbox {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.l2p-focus-whole-group:focus-within > .ui-inputfield.ui-state-focus,
.l2p-focus-whole-group:focus-within > .ui-widget.ui-state-focus,
.l2p-focus-whole-group:focus-within > .ui-inputfield:focus,
.l2p-focus-whole-group:focus-within > .ui-widget:focus,
.l2p-focus-whole-group:focus-within > .ui-float-label > .ui-widget.ui-state-focus,
.l2p-focus-whole-group:focus-within > .ui-float-label > .ui-widget:focus {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

.l2p-focus-whole-group > .ui-inputfield.ui-state-error,
.l2p-focus-whole-group > .ui-widget.ui-state-error,
.l2p-focus-whole-group > .ui-float-label > .ui-widget.ui-state-error {
    border-color: #ced4da !important;
    box-shadow: none !important;
}

/* Checkbox style */
.l2p-checkbox-with-label {
	display: flex;
	align-items: start;
}

.ui-fluid .ui-buttonset.ui-buttonset-2.l2p-buttonset-always-one-line .ui-button {
	width: 50%;
}

/* --- Global Custom Glow (Powered by JS Theme Sniffer) --- */
body .ui-inputfield.ui-state-focus,
body .ui-inputfield:focus,
body .ui-selectonemenu.ui-state-focus,
body .ui-selectcheckboxmenu.ui-state-focus,
body .ui-autocomplete-multiple-container.ui-state-focus,
body .ui-chips.ui-state-focus > ul {
    
    /* Force the hard border to match the exact extracted color */
    border-width: 1px !important;
    border-color: var(--active-theme-color) !important;
    outline: 0 none !important;

    /* Apply the exact color to the gradient shadow math */
    box-shadow: 
        0 0 5px 1px color-mix(in sRGB, var(--active-theme-color) 40%, transparent), 
        0 0 10px 2px color-mix(in sRGB, var(--active-theme-color) 15%, transparent) !important;
}
body .ui-selectonemenu .ui-inputfield,
body .ui-selectcheckboxmenu .ui-inputfield {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-top: 0 !important; /* <--- Resets the margin so the text stays perfectly centered! */
}

/* Standard Outlined Buttons */
body .ui-button.outlined-button:not(.secondary-button):hover,
body .ui-button.outlined-button:not(.secondary-button):focus {
    box-shadow:
        inset 0 0 0 9999px var(--active-theme-color),
        0 0 5px 1px color-mix(in sRGB, var(--active-theme-color) 40%, transparent),
        0 0 10px 2px color-mix(in sRGB, var(--active-theme-color) 15%, transparent) !important;
    border-color: var(--active-theme-color) !important;
    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Danger Outlined Buttons */
body .ui-button.outlined-button:is(.help-button, .info-button, .success-button, .warning-button, .danger-button):hover,
body .ui-button.outlined-button:is(.help-button, .info-button, .success-button, .warning-button, .danger-button):focus {
    box-shadow:
        inset 0 0 0 9999px currentColor,
        0 0 5px 1px color-mix(in sRGB, currentColor 40%, transparent),
        0 0 10px 2px color-mix(in sRGB, currentColor 15%, transparent) !important;
	border-color: currentColor !important;
}
body .ui-button.outlined-button:not(.secondary-button):hover *,
body .ui-button.outlined-button:not(.secondary-button):focus * {
    color: #fff !important;
}

/* Custom Radio Buttons for payment method */

/* Hide default radio */
.custom-radio-card .ui-radiobutton-box {
    display: none;
}

/* Card style */
/* wrapper */
.radio-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    align-items: stretch; /* important */
}

/* each grid item */
.custom-radio-card {
    display: flex;
    height: 100%; /* important */
}

/* make label/card stretch */
.card-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex: 1;          /* important */
    min-height: 140px; /* optional fixed equal height */

    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s ease;

    box-sizing: border-box;
}

.radio-wrapper-single-row .card-label {
	justify-content: space-around;
}

.card-label.no-minimum {
    min-height: 0px;
}

/* Icon */
.icon {
    font-size: 24px;
    color: #666;
}

.custom-radio-card:has(.ui-state-active) .icon {
    color: #2196F3;
}

/* Title */
.title {
    font-weight: 600;
    font-size: 16px;
}

/* Description */
.desc {
    font-size: 13px;
    color: #777;
}

/* Hover */
.custom-radio-card:not(:has(.ui-state-disabled)) .card-label:hover {
    border-color: #2196F3;
}

.custom-radio-card:has(.ui-state-disabled) .card-label:hover {
    border-color: #ddd;
    background: #f5f5f5;
    box-shadow: none;
}

/* ✅ Selected state (your working solution) */
/* Selected state ONLY when not disabled */
.custom-radio-card:has(.ui-state-active):not(:has(.ui-state-disabled)) .card-label {
    border-color: #2196F3;
    background-color: #F4F8FF;
    box-shadow: 0 2px 8px rgba(33,150,243,0.2);
}

/* Selected icon color ONLY when not disabled */
.custom-radio-card:has(.ui-state-active):not(:has(.ui-state-disabled)) .icon {
    color: #2196F3;
}

.custom-radio-card:has(.ui-state-disabled) .card-label {
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #ddd !important;
    background: #f5f5f5;
}

/* Selected icon color */
.custom-radio-card:has(.ui-state-active) .icon {
    color: #2196F3;
}

/* Optional: subtle click effect */
.card-label:active {
    transform: scale(0.98);
}

/* Tablet */
@media (max-width: 1024px) {
    .radio-wrapper:not(.radio-wrapper-single-row) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .radio-wrapper:not(.radio-wrapper-single-row) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .card-label {
        padding: 16px;
    }

    .title {
        font-size: 15px;
    }

    .desc {
        font-size: 12px;
    }
}

@media (max-width: 900px) {
    .radio-wrapper:not(.radio-wrapper-single-row) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.radio-wrapper:not(.radio-wrapper-single-row) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.radio-wrapper.radio-wrapper-single-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.radio-wrapper.radio-wrapper-single-row > .custom-radio-card {
    flex: 1 1 0;
    position: relative;
    flex-direction: column;
    min-width: 0;
    height: auto;
}

.radio-wrapper.radio-wrapper-single-row > .custom-radio-card > .ui-radiobutton {
    position: absolute;
}

.radio-wrapper.radio-wrapper-single-row > .custom-radio-card > label.card-label {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    width: 100%;
}

/* Keep payment-method cards comfortably tappable on narrow phone screens. */
@media (max-width: 640px) {
    .radio-wrapper.radio-wrapper-single-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================================
   shadcn-inspired design layer  (ported from l2p-web custom.css)

   STRUCTURE ONLY — radius, shadows, hairline borders. All colors stay
   owned by the Diamond theme; borders derive from `currentColor`. Kept
   at the END of custom.css so it wins over the earlier rules.
   ===================================================================== */

/* ---- Cards: hairline border + soft shadow + larger radius ----------- */
.card {
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: var(--l2p-radius-lg) !important;
    box-shadow: var(--l2p-shadow-float); /* even shadow, matches dialog */
}

/* ---- Buttons: medium weight + 6px radius (keep theme/severity color)  */
body .ui-button:not(.ui-avatar):not(.rounded-button):not(.ui-button-rounded):not(.ui-paginator-page) {
    border-radius: var(--l2p-radius-md);
    font-weight: 500;
}

/* ---- SelectOneButton: round only the group's outer corners; the edges
        where segments join stay square. !important beats the generic
        button rule above (its :not() chain has higher specificity). ---- */
body .ui-selectonebutton .ui-button {
    border-radius: 0 !important;
}
body .ui-selectonebutton .ui-button:first-child {
    border-radius: var(--l2p-radius-md) 0 0 var(--l2p-radius-md) !important;
}
body .ui-selectonebutton .ui-button:last-child {
    border-radius: 0 var(--l2p-radius-md) var(--l2p-radius-md) 0 !important;
}

/* ---- Inputs: 6px radius + neutral hairline border ------------------- */
body .ui-inputtext,
body .ui-inputfield,
body .ui-selectonemenu,
body .ui-selectcheckboxmenu,
body .ui-dropdown,
body .ui-multiselect,
body .ui-chips > ul {
    border-radius: var(--l2p-radius-md);
}

/* ---- Dialog: matching floating-surface style (radius/border/shadow) - */
body .ui-dialog {
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent) !important;
    border-radius: var(--l2p-radius-lg) !important;
    box-shadow: var(--l2p-shadow-float) !important;
}
/* Round the inner sections so their backgrounds follow the 20px corners,
   otherwise the square titlebar/content corners poke past the border. */
body .ui-dialog .ui-dialog-titlebar {
    border-top-left-radius: var(--l2p-radius-lg);
    border-top-right-radius: var(--l2p-radius-lg);
}
body .ui-dialog .ui-dialog-content:last-child {
    border-bottom-left-radius: var(--l2p-radius-lg);
    border-bottom-right-radius: var(--l2p-radius-lg);
}
body .ui-dialog .ui-dialog-footer {
    border-bottom-left-radius: var(--l2p-radius-lg);
    border-bottom-right-radius: var(--l2p-radius-lg);
}

/* ---- Ported from l2p-web/custom.css (structure-only additions found
        there that weren't yet mirrored here and are relevant on this
        page's actual markup) ------------------------------------------ */

/* Icon-only buttons (e.g. the datepicker trigger below): recenter the
   icon now that the button padding/radius have changed from default. */
body .ui-button.ui-button-icon-only .ui-icon {
    margin-left: -0.73rem;
    font-size: 1.2rem !important;
}

/* ---- PrimeFaces date picker input + trigger: one connected control ---
   Several p:datePicker instances on this page (Send Payment On, recurring
   schedule) otherwise render as two separate rounded boxes with a gap. */
body .ui-calendar.ui-trigger-calendar {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
}
body .ui-calendar.ui-trigger-calendar > input.ui-inputfield {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--l2p-radius-md) 0 0 var(--l2p-radius-md) !important;
}
body .ui-calendar.ui-trigger-calendar > .ui-datepicker-trigger.ui-button {
    position: relative;
    right: auto;
    flex: 0 0 auto;
    margin-left: -1px;
    border-radius: 0 var(--l2p-radius-md) var(--l2p-radius-md) 0 !important;
}

/* ---- Input groups: remove curves and double borders at inner seams ---
   Generic version for plain .ui-inputgroup (e.g. the Enter Amount field's
   $ addon). Guarded with :not(.l2p-focus-whole-group) — that class above
   already gives its own group a more thorough seamless treatment (child
   borders removed entirely, single border on the wrapper), so this only
   fills the gap for groups that DON'T use it. */
body .ui-inputgroup:not(.l2p-focus-whole-group) > :not(:last-child),
body .ui-inputgroup:not(.l2p-focus-whole-group) > :not(:last-child) .ui-inputfield {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body .ui-inputgroup:not(.l2p-focus-whole-group) > :not(:first-child) {
    margin-left: -1px;
}
body .ui-inputgroup:not(.l2p-focus-whole-group) > :not(:first-child),
body .ui-inputgroup:not(.l2p-focus-whole-group) > :not(:first-child) .ui-inputfield {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
body .ui-inputgroup:not(.l2p-focus-whole-group) > :first-child,
body .ui-inputgroup:not(.l2p-focus-whole-group) > :first-child .ui-inputfield {
    border-top-left-radius: var(--l2p-radius-md) !important;
    border-bottom-left-radius: var(--l2p-radius-md) !important;
}
body .ui-inputgroup:not(.l2p-focus-whole-group) > :last-child,
body .ui-inputgroup:not(.l2p-focus-whole-group) > :last-child .ui-inputfield {
    border-top-right-radius: var(--l2p-radius-md) !important;
    border-bottom-right-radius: var(--l2p-radius-md) !important;
}

/* ---- Hosted payment page: merchant-address security reassurance ------ */
.merchant-address {
    display: inline-flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
}

.merchant-address > .merchant-address-details {
    flex: 1 1 auto;
    min-width: 0;
}

body .ui-tooltip.secure-payments-tooltip {
    max-width: 18rem;
}

body .ui-tooltip.secure-payments-tooltip .ui-tooltip-text {
    line-height: 1.4;
}