257 lines
22 KiB
CSS
257 lines
22 KiB
CSS
/* Independent design prototype: never edit production styles for these pages.
|
|
Match home typography: main text/actions >=14px, secondary labels 12px.
|
|
Keep text readable on small screens; compact spacing instead of shrinking text. */
|
|
@font-face{font-family:ChaharsuVazirmatn;src:url('../../static/fonts/vazirmatn-arabic-wght-normal.woff2?v=1791111429240969400') format('woff2');font-weight:100 900;font-display:swap}
|
|
@font-face{font-family:ChaharsuLatin;src:url('../../static/fonts/vazirmatn-latin-wght-normal.woff2?v=1791111429240969400') format('woff2');font-weight:100 900;font-display:swap}
|
|
body{font-family:ChaharsuVazirmatn,ChaharsuLatin,sans-serif;color:var(--color-ink);font-size:14px}
|
|
[hidden]{display:none!important}
|
|
a,button,input{touch-action:manipulation}
|
|
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--color-sea);outline-offset:4px}
|
|
.icon{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
|
|
.preview-bar{background:var(--color-mint);text-align:center;padding:7px 14px;font-size:12px;line-height:1.65;border-bottom:1px solid #cde6f7}
|
|
.page-header{border-bottom:1px solid #dce2e8;background:#eeeeee}
|
|
.header-inner{max-width:1120px;margin:auto;min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
|
|
.brand{display:flex;align-items:center;gap:14px;color:var(--color-ink)}
|
|
.brand img{width:85px;height:auto}
|
|
.brand-copy{border-right:1px solid #cdd7e0;padding-right:14px}
|
|
.brand b{display:block;font-size:20px;font-weight:900;line-height:1.3}
|
|
.brand small{display:block;font-size:12px;color:#526c86;margin-top:4px}
|
|
.header-home{font-size:14px;font-weight:800;color:#1977ce;display:flex;align-items:center;min-height:44px}
|
|
.service-main{width:100%;max-width:900px;margin:auto;padding:24px 24px 40px}
|
|
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#526c86;margin-bottom:16px}
|
|
.breadcrumb a{color:#1977ce;min-height:44px;display:flex;align-items:center}
|
|
.title-row{display:flex;align-items:flex-start;gap:14px}
|
|
.page-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:15px;background:var(--color-mint);color:#1977ce}
|
|
.service-main h1{font-size:28px;line-height:1.5;font-weight:900;letter-spacing:0;margin:0}
|
|
.subtitle{font-size:14px;line-height:1.7;color:#526c86;margin:7px 0 0}
|
|
.soon{display:inline-block;color:#805300;background:#fff3da;border:1px solid #f3ddae;border-radius:20px;padding:3px 9px;font-size:12px;font-weight:700;white-space:nowrap}
|
|
.service-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:18px 0;border:1px solid #f3ddae;border-radius:15px;background:#fff8eb}
|
|
.service-notice p{font-size:14px;line-height:1.65;color:#805300;margin:0;flex:1;min-width:0}
|
|
.content-card{border:1px solid #dce5ed;border-radius:23px;padding:22px;background:white;margin:16px 0}
|
|
.content-card h2{font-size:20px;font-weight:900;line-height:1.6;margin:0 0 8px}
|
|
.content-card p{font-size:14px;line-height:1.7;color:#526c86;margin:0 0 16px}
|
|
.upload-zone{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px dashed #91bfdd;border-radius:18px;padding:22px 18px;background:#f6fbff}
|
|
.upload-zone svg{color:#1977ce;width:32px;height:32px}
|
|
.upload-zone label{margin:0;font-size:16px;font-weight:800;line-height:1.6}
|
|
.upload-zone span{font-size:14px;color:#526c86;text-align:center;line-height:1.65}
|
|
.upload-zone input[type=file]{width:100%;min-width:0;max-width:390px;margin:0;font-size:14px;background:white;padding:8px;border:1px solid #dce5ed;border-radius:12px;min-height:44px}
|
|
.upload-zone input::file-selector-button{font:inherit;min-height:30px}
|
|
.file-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #cde6f7;border-radius:12px;background:var(--color-mint);margin-top:12px}
|
|
.file-selection p{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--color-ink);font-size:14px}
|
|
.file-selection button{background:transparent;box-shadow:none;min-height:44px;padding:6px 8px;color:#1977ce;font-size:14px;flex-shrink:0}
|
|
.file-selection button:hover{transform:none;box-shadow:none;color:var(--color-ink);background:white}
|
|
.receipt-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
|
|
.receipt-actions button{background:var(--color-ink);font-size:14px;min-height:44px}
|
|
.receipt-actions a{color:#1977ce;font-size:14px;font-weight:700;min-height:44px;display:flex;align-items:center}
|
|
.account-fields{display:grid;gap:0;margin:12px 0 0}
|
|
.account-fields div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #e7edf2;font-size:14px;line-height:1.7}
|
|
.account-fields dt{color:#526c86}
|
|
.account-fields dd{margin:0;color:var(--color-ink);font-weight:700;text-align:left;overflow-wrap:anywhere;min-width:0}
|
|
.identifier-card{background:#f6fbff;border-color:#cde6f7}
|
|
.service-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 0;font-size:14px;line-height:1.7}
|
|
.service-footer a{color:#1977ce;font-weight:800;min-height:44px;display:flex;align-items:center}
|
|
.page-footer{font-size:12px;line-height:1.8;color:#526c86;text-align:center;margin:24px 0 0}
|
|
.page-footer a{color:inherit;white-space:nowrap}
|
|
.page-footer a:hover{color:#1977ce}
|
|
@media(max-width:639px){
|
|
.preview-bar{padding:5px 12px}
|
|
.header-inner{min-height:65px;padding:0 12px;gap:8px}
|
|
.brand{gap:8px}.brand img{width:56px}.brand-copy{padding-right:8px}.brand b{font-size:18px}
|
|
.brand small{font-size:12px}
|
|
.header-home{font-size:14px}
|
|
.service-main{padding:10px 12px 28px}
|
|
.breadcrumb{margin-bottom:8px}
|
|
.title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px}
|
|
.title-row>.page-icon{grid-column:2;grid-row:1}
|
|
.title-row>div{display:contents}
|
|
.service-main h1{grid-column:1;grid-row:1;font-size:24px;align-self:center}
|
|
.subtitle{grid-column:1/-1;margin-top:6px}
|
|
.page-icon{width:36px;height:36px;border-radius:12px}
|
|
.service-notice{margin:14px 0;padding:10px 12px;gap:8px}
|
|
.content-card{padding:16px;border-radius:20px;margin:12px 0}
|
|
.content-card h2{font-size:18px;margin-bottom:6px}
|
|
.content-card p{margin-bottom:12px}
|
|
.upload-zone{padding:14px 12px;gap:8px}
|
|
.upload-zone>svg{display:none}
|
|
.receipt-actions{flex-direction:column;align-items:stretch;gap:6px;margin-top:12px}
|
|
.receipt-actions button{width:100%}
|
|
.receipt-actions a{justify-content:center}
|
|
.account-fields{margin-top:8px}
|
|
.account-fields div{padding:9px 0;gap:8px}
|
|
.service-footer{align-items:stretch;flex-direction:column;gap:4px;margin-top:12px}
|
|
.page-footer{margin-top:18px}
|
|
}
|
|
@media(max-width:359px){.brand img{width:44px}.brand small{font-size:12px}.header-home{font-size:14px}.content-card{padding:14px}}
|
|
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
|
|
|
|
/* Payment notice & receipt flow. All values belong to a single customer notice.
|
|
Use rem, 44px touch targets, dark text on pale surfaces; local SVG/fonts only. */
|
|
a,button,input,textarea,select,summary{touch-action:manipulation}
|
|
textarea:focus-visible,select:focus-visible{outline:3px solid var(--color-ink-soft);outline-offset:3px}
|
|
.header-home,.breadcrumb a,.service-footer a,.receipt-actions a,.file-selection button{color:var(--color-ink)}
|
|
.page-icon{color:var(--color-ink-soft)}
|
|
.finance-button,.copy-field,.notice-toggle{font-family:inherit;box-shadow:none;transform:none!important;letter-spacing:0}
|
|
.finance-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--color-ink);border-radius:12px;background:var(--color-ink);color:white;font-size:.875rem;font-weight:800;line-height:1.7;text-align:center}
|
|
.finance-button:hover{background:var(--color-ink-soft);color:white;box-shadow:none}
|
|
.finance-button.secondary{background:white;color:var(--color-ink);border-color:#bfcede}
|
|
.finance-button.secondary:hover{background:var(--color-mint);border-color:var(--color-ink-soft)}
|
|
.list-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 12px}
|
|
.list-heading h2{font-size:1.25rem;font-weight:900;line-height:1.6;margin:0}
|
|
.list-heading p{font-size:.875rem;color:#526c86;line-height:1.7;margin:4px 0 0}
|
|
.meta{font-size:.75rem;color:#526c86;flex-shrink:0}
|
|
.finance-search{display:flex;align-items:center;gap:10px;background:white;border:1px solid #bfcede;padding:0 12px;border-radius:12px;margin-bottom:16px;color:#526c86}
|
|
.finance-search input{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:10px;padding:10px 0;min-height:44px;min-width:0;font-size:1rem!important;color:var(--color-ink);width:100%}
|
|
.finance-search:focus-within{outline:3px solid var(--color-ink-soft);outline-offset:3px}
|
|
.finance-search input:focus{outline:none}
|
|
.finance-search input::placeholder{color:#526c86;opacity:1}
|
|
.payment-notices{display:grid;gap:12px}
|
|
.payment-notice{min-width:0;border:1px solid #dce5ed;border-radius:20px;background:white;overflow:hidden}
|
|
.payment-notice:has([aria-expanded=true]){border-color:#91b8d7}
|
|
.payment-notice h3{margin:0}
|
|
.notice-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;background:white;color:var(--color-ink);text-align:right;border-radius:20px;min-height:44px}
|
|
.notice-toggle:hover{background:#f6fbff;color:var(--color-ink);box-shadow:none}
|
|
.notice-toggle:focus-visible{outline-offset:-4px;outline-color:var(--color-ink-soft)}
|
|
.notice-toggle[aria-expanded=true]>.icon{transform:rotate(180deg)}
|
|
.notice-summary{display:grid;gap:8px;min-width:0;flex:1}
|
|
.notice-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
|
|
.notice-title{font-size:1rem;font-weight:800;line-height:1.7;overflow-wrap:anywhere}
|
|
.notice-amount{font-size:1.25rem;line-height:1.6;font-weight:900}
|
|
.notice-meta{font-size:.75rem;line-height:1.8;color:#526c86;font-weight:400;overflow-wrap:anywhere}
|
|
.payment-state{font-size:.75rem;font-weight:700;line-height:1.7;background:#fff3da;color:#805300;padding:3px 9px;border-radius:20px;white-space:nowrap}
|
|
.payment-state.received{background:var(--color-mint);color:var(--color-ink)}
|
|
.notice-detail{padding:0 20px 20px;border-top:1px solid #e7edf2}
|
|
.notice-context{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:14px 0;color:#526c86;font-size:.75rem;line-height:1.8}
|
|
.payment-fields{margin:0}
|
|
.payment-field{display:grid;grid-template-columns:140px minmax(0,1fr) 64px;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #e7edf2;font-size:.875rem;line-height:1.7;min-width:0}
|
|
.payment-field dt{color:#526c86;font-weight:400;margin:0;overflow-wrap:anywhere}
|
|
.payment-field dd{color:var(--color-ink);font-weight:700;margin:0;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
|
|
.payment-field dd.numeric-value{text-align:right;unicode-bidi:isolate;font-size:1rem}
|
|
.payment-field.no-copy{grid-template-columns:140px minmax(0,1fr)}
|
|
.copy-field{padding:6px 10px;min-height:44px;min-width:44px;font-size:.875rem;font-weight:700;line-height:1.5;color:var(--color-ink);border:1px solid #dce5ed;background:#f6fbff;border-radius:10px}
|
|
.copy-field:hover{background:var(--color-mint);color:var(--color-ink);border-color:#91b8d7;box-shadow:none}
|
|
.notice-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
|
|
.copy-help{font-size:.875rem;color:#526c86;margin:12px 0 0;line-height:1.7}
|
|
.empty-notices{text-align:center;padding:24px 16px;background:white;border:1px solid #dce5ed;border-radius:20px}
|
|
.empty-notices h3{font-size:1.125rem;font-weight:800;margin:0 0 8px}
|
|
.empty-notices p{font-size:.875rem;line-height:1.7;color:#526c86;margin:0 0 16px}
|
|
.copy-feedback:empty{display:none}
|
|
.copy-feedback{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);z-index:50;border-radius:12px;background:var(--color-ink);color:white;padding:12px 16px;font-size:.875rem;line-height:1.7;box-shadow:0 8px 28px #08376b26;pointer-events:none}
|
|
.manual-copy{width:calc(100% - 24px);max-width:560px;border:1px solid #dce5ed;padding:24px;border-radius:20px;background:white;color:var(--color-ink)}
|
|
.manual-copy::backdrop{background:#08376b80}
|
|
.manual-copy h2{font-size:1.25rem;line-height:1.6;font-weight:900;margin:0 0 12px}
|
|
.manual-copy p{font-size:.875rem;line-height:1.7;color:#526c86;margin:0 0 16px}
|
|
.manual-copy textarea{width:100%;min-height:240px;font-size:1rem;line-height:1.7;padding:12px}
|
|
.manual-copy>div{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
|
|
.receipt-mode{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;padding:0;margin:16px 0}
|
|
.receipt-mode label{display:flex;align-items:center;gap:10px;margin:0;padding:12px;min-height:64px;border:1px solid #bfcede;border-radius:12px;cursor:pointer;background:white;color:var(--color-ink)}
|
|
.receipt-mode label:has(input:checked){background:var(--color-mint);border-color:var(--color-ink-soft)}
|
|
.receipt-mode input{width:20px;height:20px;flex-shrink:0;accent-color:var(--color-ink)}
|
|
.receipt-mode b{display:block;font-size:.875rem;line-height:1.7;font-weight:800}
|
|
.receipt-mode small{display:block;font-size:.75rem;line-height:1.8;color:#526c86;font-weight:400;margin-top:2px}
|
|
#receipt-form .field-label{display:block;font-size:1rem;font-weight:700;color:var(--color-ink);margin:12px 0 8px;line-height:1.7}
|
|
#receipt-form .field-label span{font-size:.875rem;font-weight:400;color:#526c86}
|
|
#receipt-form input:not([type=radio]),#receipt-form select,#receipt-form textarea{font-size:1rem;line-height:1.7;min-height:44px;min-width:0;padding:10px 12px;border:1px solid #bfcede;border-radius:12px;box-shadow:none;width:100%;color:var(--color-ink)}
|
|
#receipt-form input::placeholder,#receipt-form textarea::placeholder{color:#526c86;opacity:1}
|
|
#receipt-form .field-help{font-size:.875rem;color:#526c86;line-height:1.7;margin:8px 0 0}
|
|
#receipt-form .inline-error{background:#fff8eb;border:1px solid #f3ddae;border-radius:12px;padding:12px;color:#805300;font-size:.875rem;line-height:1.7;margin:12px 0}
|
|
.selected-payment{background:#f6fbff;border:1px solid #cde6f7;border-radius:16px;padding:16px;margin-top:16px}
|
|
.selected-payment h3{font-size:1rem;line-height:1.7;font-weight:800;margin:0 0 8px}
|
|
.compact-fields .payment-field{padding:8px 0}
|
|
.text-action{display:flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:700;color:var(--color-ink);margin-top:8px;line-height:1.7}
|
|
.receipt-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
|
.receipt-field-grid>div{min-width:0}
|
|
#receipt-form .upload-zone{margin:20px 0 0}
|
|
#receipt-form .upload-zone label{color:var(--color-ink);font-size:1rem}
|
|
#receipt-form .upload-zone input{max-width:100%;background:white}
|
|
#receipt-form .upload-zone input::file-selector-button{min-height:44px;background:var(--color-ink);color:white;border:0;border-radius:8px;padding:8px 12px;font:inherit;margin-inline-end:8px;cursor:pointer}
|
|
#receipt-form textarea{min-height:100px;resize:vertical}
|
|
.receipt-summary{padding:12px;background:var(--color-mint);border-radius:12px;margin-top:16px;font-size:.875rem;line-height:1.7;color:var(--color-ink);overflow-wrap:anywhere}
|
|
@media(max-width:639px){
|
|
.list-heading{margin-top:20px;gap:8px}.list-heading h2{font-size:1.125rem}
|
|
.finance-search{gap:8px;padding:0 10px}
|
|
.notice-toggle{padding:16px 14px;gap:8px}.notice-summary{gap:6px}.notice-title{font-size:.875rem}.notice-amount{font-size:1.125rem}
|
|
.notice-detail{padding:0 14px 16px}.notice-context{padding:12px 0}
|
|
.payment-field,.payment-field.no-copy{grid-template-columns:minmax(0,1fr) 56px;gap:6px 8px;padding:12px 0}
|
|
.payment-field dt{grid-column:1;grid-row:1}.payment-field dd{grid-column:1;grid-row:2}
|
|
.payment-field .copy-field{grid-column:2;grid-row:1/3;align-self:center}
|
|
.payment-field.no-copy dd{grid-column:1/-1}
|
|
.payment-field dd.numeric-value{font-size:.875rem}
|
|
.notice-actions{grid-template-columns:1fr;gap:8px}.notice-actions .receipt-link{grid-row:1}
|
|
.copy-help{margin-top:8px}.receipt-mode{grid-template-columns:1fr;gap:8px;margin:12px 0}
|
|
.receipt-mode label{min-height:64px;padding:10px 12px}
|
|
.receipt-field-grid{grid-template-columns:1fr;gap:0}.selected-payment{padding:12px}
|
|
.manual-copy{padding:16px}#receipt-form .upload-zone{margin-top:16px}
|
|
}
|
|
#receipt-form .upload-zone .file-picker-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;margin:0;border-radius:12px;background:var(--color-ink);color:white;cursor:pointer;font-size:.875rem;line-height:1.7}
|
|
#receipt-form .upload-zone:has(input:focus-visible) .file-picker-label{outline:3px solid var(--color-ink-soft);outline-offset:4px}
|
|
#receipt-form input#receipt-file.sr-only{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
|
|
@media(max-width:639px){
|
|
/* Bank identifiers need the whole mobile row: avoid an isolated final IBAN digit. */
|
|
.payment-field:has(dd.numeric-value) dd{grid-column:1/-1}
|
|
.payment-field:has(dd.numeric-value) .copy-field{grid-row:1}
|
|
}
|
|
|
|
/* Compact financial UI: keep supplementary prose compact and visible, keep payment values readable. */
|
|
.finance-guidance,#receipt-form .finance-guidance{margin:16px 0;padding:10px 12px;border-radius:12px;background:var(--color-mint);color:var(--color-ink);font-size:.875rem;line-height:1.7;font-weight:400}
|
|
.notice-bank{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;padding:12px 0;font-size:.875rem;line-height:1.7}
|
|
.notice-bank-name{font-weight:800}.notice-holder{color:#526c86;font-weight:400}
|
|
.essential-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
|
|
.essential-fields .payment-field{grid-template-columns:minmax(0,1fr) 56px;gap:0 8px;padding:8px 0}
|
|
.essential-fields .payment-field dt{grid-column:1;grid-row:1}
|
|
.essential-fields .payment-field dd{grid-column:1/-1;grid-row:2}
|
|
.essential-fields .copy-field{grid-column:2;grid-row:1;align-self:center}
|
|
.notice-extra{margin-top:8px;border-top:1px solid #e7edf2}
|
|
.extra-fields .payment-field{grid-template-columns:140px minmax(0,1fr);padding:8px 0}
|
|
.extra-fields .payment-field dd{font-weight:400;line-height:1.8}
|
|
.notice-extra .notice-context{padding:4px 0 8px}
|
|
.recommended-mode{border-inline-start:3px solid var(--color-ink-soft)!important}
|
|
.recommended-badge{display:inline-block;margin-inline-start:6px;padding:1px 7px;font-size:.75rem;font-weight:700;line-height:1.8;border-radius:20px;background:var(--color-ink);color:white}
|
|
@media(max-width:639px){
|
|
.essential-fields{grid-template-columns:1fr;gap:0}
|
|
.essential-fields .payment-field{padding:6px 0;gap:0 8px}
|
|
.essential-fields .payment-field dd{margin-top:-2px}
|
|
.extra-fields .payment-field{grid-template-columns:1fr;gap:4px}
|
|
.extra-fields .payment-field dt,.extra-fields .payment-field dd{grid-column:1}
|
|
.notice-bank{display:grid;gap:2px;padding:10px 0}
|
|
.finance-guidance,#receipt-form .finance-guidance{margin:12px 0}
|
|
}
|
|
|
|
/* Supplementary notice information is permanent within the opened notice card. */
|
|
.notice-extra h4{font-size:.875rem;font-weight:800;line-height:1.7;margin:12px 0 8px;color:var(--color-ink)}
|
|
/* Native Persian day/month/year controls: readable labels and 44px targets. */
|
|
.receipt-date{border:0;padding:0;margin:20px 0 0;min-width:0}
|
|
.receipt-date legend{font-size:1rem;font-weight:700;line-height:1.7;color:var(--color-ink);padding:0;margin-bottom:8px}
|
|
.receipt-date legend span{font-size:.875rem;font-weight:400;color:#526c86}
|
|
.date-selects{display:grid;grid-template-columns:minmax(64px,.7fr) minmax(110px,1.2fr) minmax(80px,1fr);gap:12px}
|
|
.date-selects>div{min-width:0}
|
|
#receipt-form .date-selects label{font-size:.875rem;font-weight:400;line-height:1.7;color:#526c86;margin:0 0 4px}
|
|
#receipt-form .date-selects select{padding:10px 8px;font-size:1rem;min-height:44px;width:100%;text-align:right}
|
|
.date-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
|
|
#receipt-form .date-tools p{font-size:.875rem;line-height:1.7;color:#526c86;margin:0}
|
|
.date-tools button{flex-shrink:0;padding:6px 12px}
|
|
#receipt-form #receipt-date-status{font-size:.875rem;line-height:1.7;color:var(--color-ink);margin:4px 0 0;min-height:24px}
|
|
@media(max-width:639px){
|
|
.date-selects{grid-template-columns:minmax(0,.65fr) minmax(0,1.25fr) minmax(0,1fr);gap:8px}
|
|
#receipt-form .date-selects select{padding:10px 4px}
|
|
.receipt-date{margin-top:16px}
|
|
.date-tools{gap:8px}
|
|
}
|
|
/* Minimal Today action, preserving a 44px touch target and visible keyboard focus. */
|
|
#receipt-date-today{min-height:44px;min-width:44px;padding:4px 8px;border:0;background:transparent;color:var(--color-ink);box-shadow:none;font-size:.875rem;font-weight:700}
|
|
#receipt-date-today:hover{background:var(--color-mint);color:var(--color-ink)}
|
|
/* Explicit, readable field errors and a linked summary; never color alone. */
|
|
#receipt-form .field-error{font-size:.875rem;line-height:1.8;font-weight:500;color:#9f1f1f;margin:8px 0 0}
|
|
#receipt-form [aria-invalid=true]:not([type=hidden]):not([type=file]){border-color:#b93333;background:#fffafa}
|
|
#receipt-form .upload-zone:has(input[aria-invalid=true]){border-color:#b93333;background:#fffafa}
|
|
.receipt-errors{background:#fffafa;border:1px solid #e5aaaa;border-radius:16px;padding:16px;margin:16px 0;color:#9f1f1f}
|
|
#receipt-form .receipt-errors h2{font-size:1rem;font-weight:800;line-height:1.7;margin:0 0 8px;color:#9f1f1f}
|
|
.receipt-errors ul{padding:0;list-style:none;margin:0}
|
|
.receipt-errors a{display:flex;align-items:center;min-height:44px;font-size:.875rem;line-height:1.7;color:#9f1f1f;text-decoration:underline;text-underline-offset:3px}
|
|
#receipt-form .validation-status{font-size:.875rem;line-height:1.8;color:var(--color-ink);margin:12px 0 0}
|
|
#receipt-form .validation-status:empty{display:none}
|
|
#receipt-form .file-picker-label span{font-size:.875rem;color:inherit}
|
|
#receipt-form .amount-words{font-size:.875rem;line-height:1.8;font-weight:700;color:var(--color-ink);margin:8px 0 0;overflow-wrap:anywhere}
|
|
#receipt-form .amount-words:empty{display:none}
|
|
#paid-amount{text-align:right;font-variant-numeric:tabular-nums}
|
|
.bank-fields{margin-top:12px}
|