/* * Takaful UI — Shared Component Library * ====================================== * Root class: .takaful-ui (applied to in vehicle layout) * All shared components are scoped under .takaful-ui. * * Module-specific overrides: * - health.css → .health-ui (for health-specific styles) * - claims.css → .motor-claims-ui (for claims-specific styles) * * To apply shared styling to a new module: * 1. Wrap page content in a section with .your-module-ui class * 2. Add module-specific overrides in your-module.css using .your-module-ui * 3. No changes needed here — shared styles apply automatically via .takaful-ui */ /* ============================================== Design Tokens ============================================== */ .takaful-ui { --takaful-primary: #8cc63f; --takaful-primary-dark: #79b131; --takaful-primary-deep: #2f4f1f; --takaful-text: #1f2937; --takaful-muted: #667085; --takaful-border: #d6dee3; --takaful-radius-card: 14px; --takaful-radius-input: 12px; } /* ============================================== Global Utilities ============================================== */ .mandatory { color: #d32f2f; } /* ============================================== Info Modal (shared popup used across modules) ============================================== */ .info-modal { position: fixed; inset: 0; z-index: 99999; } .info-modal .backdrop-cover { z-index: 0; } .info-modal .info-modal-cover { position: fixed; inset: 0; max-width: none; margin: 0; padding: 24px; display: flex; align-items: center; justify-content: center; background: transparent; transform: none; z-index: 1; } .info-modal .info-modal-body { width: min(100%, 600px); max-height: calc(100vh - 48px); overflow: auto; padding: 32px 28px 24px; border-radius: 28px; border: 1px solid rgba(191, 222, 168, 0.82); background: rgba(255, 255, 255, 0.96); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18); } .info-modal .warning-icon { margin-bottom: 24px; display: flex; justify-content: center; align-items: center; } .info-modal .warning-content p:last-child { margin-bottom: 0; } @media (max-width: 767.98px) { .info-modal .info-modal-cover { padding: 16px; } .info-modal .info-modal-body { width: 100%; max-height: calc(100vh - 32px); padding: 24px 18px 18px; border-radius: 24px; } } /* ============================================== Form Feedback ============================================== */ .takaful-form-feedback { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #f5c2c7; border-radius: 10px; background: #fff3f4; color: #842029; font-size: 13px; font-weight: 600; line-height: 1.35; } /* ============================================== Stepper / Step Indicator ============================================== */ .takaful-stepper { display: flex; align-items: center; gap: 10px; } .takaful-stepper-item { display: inline-flex; align-items: center; gap: 8px; color: #667085; font-size: 13px; font-weight: 600; } .takaful-stepper-num { width: 24px; height: 24px; border-radius: 999px; border: 1px solid #d6dee3; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; color: #667085; font-size: 12px; font-weight: 700; } .takaful-stepper-item.active { color: #2f4f1f; } .takaful-stepper-item.active .takaful-stepper-num { background: var(--takaful-primary); border-color: var(--takaful-primary); color: #ffffff; } .takaful-stepper-divider { flex: 1; height: 1px; background: #dbe7d0; } /* ============================================== Field Helpers ============================================== */ .takaful-field-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: #475467; text-align: start; } .takaful-field-hint-icon { color: var(--takaful-primary); line-height: 1; margin-top: 1px; flex-shrink: 0; } .takaful-field-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: #475467; text-align: start; } .takaful-static-note { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #dbe8ce; border-radius: 8px; background: #f8fcf3; font-size: 13px; line-height: 1.45; color: #2d3a2a; text-align: start; } /* ============================================== Outline Button ============================================== */ .btn-takaful-outline { height: 50px; border-radius: 999px; border: 1.5px solid var(--takaful-primary); background: #ffffff; color: #6f8f2d; font-weight: 600; font-size: 14px; letter-spacing: 0.2px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: all 0.2s ease; } .btn-takaful-outline:hover { background: #f6fde9; color: #2f4f1f; text-decoration: none; } .btn-takaful-outline.secondary { border-color: #cfded0; color: #555; } /* ============================================== Form Container Components ============================================== */ .takaful-ui .motor-claims-form-cover, .takaful-ui .container-grade-cover, .takaful-ui .claim-policy-panel-cover, .takaful-ui .mot-insurance { border-radius: var(--takaful-radius-card); background: transparent; border: 0; box-shadow: none; overflow: hidden; } .takaful-ui .motor-claims-form-body, .takaful-ui .container-grade-body, .takaful-ui .claim-policy-panel-body, .takaful-ui .mot-ins-hd { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(191, 222, 168, 0.72); border-radius: var(--takaful-radius-card); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .takaful-ui .motor-claims-form-body, .takaful-ui .container-grade-body, .takaful-ui .claim-policy-panel-body { padding: 28px; } .takaful-ui .mot-ins-hd { padding: 28px; } .takaful-ui .motor-claims-form-hd h1 { margin: 14px 0 0; color: #111827; font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; } .takaful-ui .motor-claims-form-meta { margin-top: 12px; color: var(--takaful-primary-deep); font-size: 15px; font-weight: 700; line-height: 1.5; } .takaful-ui .motor-claims-form-meta--policy-no { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; } /* ============================================== Section Structure Components ============================================== */ .takaful-ui .takaful-card { border: 1px solid rgba(191, 222, 168, 0.72); border-radius: 24px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04); overflow: hidden; } .takaful-ui .takaful-card .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 26px 18px; border-bottom: 1px solid rgba(214, 222, 227, 0.9); background: transparent; } .takaful-ui .takaful-card .card-header h2, .takaful-ui .takaful-card .card-header h3, .takaful-ui .takaful-card__title { margin: 0; color: var(--takaful-text); font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.02em; } .takaful-ui .takaful-card .card-body { padding: 24px 26px 26px; } .takaful-ui .takaful-section { padding: 0; } .takaful-ui .takaful-section + .takaful-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(214, 222, 227, 0.9); } .takaful-ui .takaful-section__head { margin-bottom: 16px; } .takaful-ui .takaful-section__head h3 { margin: 0 0 6px; color: var(--takaful-text); font-size: 17px; font-weight: 800; } .takaful-ui .takaful-section__head p { margin: 0; color: var(--takaful-muted); font-size: 14px; line-height: 1.6; } .takaful-ui .takaful-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(249, 255, 244, 0.85); border: 1px solid rgba(191, 222, 168, 0.9); color: var(--takaful-primary-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .takaful-ui .takaful-column-stack { display: grid; gap: 0; height: auto; } .takaful-ui .takaful-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: start; } .takaful-ui .takaful-summary-grid > .takaful-summary-card, .takaful-ui .takaful-column-stack > .claim-pol-dtl-item, .takaful-ui .takaful-section > .takaful-summary-card { display: flex; flex-direction: column; gap: 4px; min-height: auto; padding: 12px 2px; border: 0; border-bottom: 1px solid rgba(214, 222, 227, 0.95); border-radius: 0; background: transparent; box-shadow: none; } .takaful-ui .takaful-summary-grid > .takaful-summary-card:last-child, .takaful-ui .takaful-column-stack > .claim-pol-dtl-item:last-child, .takaful-ui .takaful-section > .takaful-summary-card:last-child { border-bottom: 0; } .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(2):nth-child(3n + 1), .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(2):nth-child(3n + 2), .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(3):nth-child(3n + 1) { border-bottom: 0; } .takaful-ui .takaful-summary-grid > .takaful-summary-card.takaful-summary-card--no-divider, .takaful-ui .takaful-section > .takaful-summary-card.takaful-summary-card--no-divider { border-bottom: 0; } .takaful-ui .takaful-summary-card strong, .takaful-ui .claim-pol-dtl-item .pol-value { color: var(--takaful-text); font-size: 15px; font-weight: 700; line-height: 1.5; word-break: break-word; } .takaful-ui .takaful-summary-card__label, .takaful-ui .claim-pol-dtl-item .pol-label { color: var(--takaful-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .takaful-ui .claim-pol-dtl-item--input { gap: 10px; } .takaful-ui .claim-pol-dtl-item--input .pol-label { display: block; margin: 0; } .takaful-ui .claim-pol-dtl-item--input .mandatory { color: #d92d20; } .takaful-ui .claim-pol-dtl-item--input .form-control { min-height: 48px; border: 1px solid var(--takaful-border); border-radius: var(--takaful-radius-input); background: #ffffff; color: var(--takaful-text); box-shadow: none; font-size: 15px; font-weight: 500; padding: 11px 14px; } .takaful-ui .claim-pol-dtl-item--input .form-control::placeholder { color: #98a2b3; } .takaful-ui .claim-pol-dtl-item--input .form-control:focus { border-color: var(--takaful-primary); box-shadow: 0 0 0 4px rgba(140, 198, 63, 0.14); } .takaful-ui .takaful-check-grid, .takaful-ui .takaful-checkbox-stack, .takaful-ui .takaful-upload-mode { display: grid; gap: 12px; } .takaful-ui .takaful-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .takaful-ui .takaful-chip-list { display: flex; flex-wrap: wrap; gap: 10px; } .takaful-ui .takaful-chip { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(249, 255, 244, 0.92); border: 1px solid rgba(191, 222, 168, 0.9); color: var(--takaful-primary-deep); font-size: 13px; font-weight: 700; line-height: 1.3; } .takaful-ui .takaful-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; } .takaful-ui .takaful-actions--split { justify-content: space-between; align-items: center; flex-wrap: wrap; } .takaful-ui .takaful-action-group { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } .takaful-ui .takaful-primary-action { width: min(100%, 280px) !important; min-height: 50px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; } .takaful-ui .takaful-secondary-action { width: min(100%, 280px) !important; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .takaful-ui .takaful-inline-button { width: auto !important; min-width: 0; flex: 0 0 auto; padding-inline: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .takaful-ui .takaful-inline-button::before { content: none; } .takaful-ui .btn-close { filter: invert(18%) sepia(90%) saturate(6) hue-rotate(340deg) brightness(0.85); opacity: 1; } .takaful-ui .btn.takaful-dismiss-button { color: #b42318; border-color: #b42318; background-color: #ffffff; } .takaful-ui .btn.takaful-dismiss-button:hover, .takaful-ui .btn.takaful-dismiss-button:focus { background-color: #fef2f0; border-color: #b42318; color: #b42318; box-shadow: 0 6px 12px rgba(180, 35, 24, 0.1); } .takaful-ui .takaful-button__spinner { display: none; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: takafulButtonSpin 0.75s linear infinite; } .takaful-ui .takaful-inline-button.is-loading .takaful-button__spinner, .takaful-ui .takaful-inline-button[aria-busy="true"] .takaful-button__spinner { display: inline-block; } .takaful-ui .takaful-inline-button.is-loading .takaful-button__label, .takaful-ui .takaful-inline-button[aria-busy="true"] .takaful-button__label { opacity: 0.92; } @keyframes takafulButtonSpin { to { transform: rotate(360deg); } } .takaful-ui .takaful-select-panel { display: grid; gap: 14px; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; } .takaful-ui .takaful-select-panel .takaful-section__head { margin-bottom: 0; } .takaful-ui .takaful-select-panel .takaful-checkbox-stack { gap: 0; border-top: 1px solid rgba(214, 222, 227, 0.95); } .takaful-ui .takaful-upload-block { padding: 18px; border-radius: 20px; border: 1px solid rgba(214, 222, 227, 0.95); background: rgba(255, 255, 255, 0.52); } .takaful-ui .takaful-upload-block__head { margin-bottom: 16px; } .takaful-ui .takaful-upload-block__head h4 { margin: 0 0 6px; color: var(--takaful-text); font-size: 16px; font-weight: 800; } .takaful-ui .takaful-upload-block__head p { margin: 0; color: var(--takaful-muted); font-size: 13px; line-height: 1.6; } .takaful-ui .takaful-upload-panel + .takaful-upload-panel { margin-top: 16px; } .takaful-ui .takaful-inline-inputs { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; } .takaful-ui .takaful-inline-inputs .input-group { flex: 1 1 260px; min-width: 0; } .takaful-ui .takaful-radio-row { display: flex; flex-wrap: wrap; gap: 12px; } .takaful-ui .takaful-radio-row .radio-inline { flex: 0 0 auto; } .takaful-ui .takaful-inline-note { margin-top: 10px; color: var(--takaful-muted); font-size: 13px; line-height: 1.5; } .takaful-ui .takaful-inline-note.is-error { color: #b42318; } .takaful-ui .takaful-inline-note.is-success { color: #027a48; } /* ============================================== Shared Checkbox Component ============================================== */ .takaful-ui .checkbox { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; padding: 0; margin: 4px 0; cursor: pointer; user-select: none; font-size: 14px; font-weight: 500; line-height: 1.4; } .takaful-ui .checkbox input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .takaful-ui .checkbox .checkmark { position: relative; order: -1; flex: 0 0 20px; height: 20px; top: auto; left: auto; background-color: #fff; border: 1.5px solid #dfe8d1; border-radius: 4px; box-shadow: 0 2px 5px rgba(31, 41, 55, 0.06); transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .takaful-ui .checkbox .checkmark:after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: translate(-50%, -50%) rotate(45deg) scale(0); opacity: 0; transition: transform 0.15s ease, opacity 0.15s ease; } .takaful-ui .checkbox:hover .checkmark { border-color: var(--takaful-primary); box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.12); } .takaful-ui .checkbox input:checked ~ .checkmark { background: linear-gradient(135deg, #2f4f1f, #1f8b4c); border-color: transparent; box-shadow: 0 4px 10px rgba(31, 139, 76, 0.3); } .takaful-ui .checkbox input:checked ~ .checkmark:after { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); } /* Panel/stack context — add vertical padding back */ .takaful-ui .takaful-select-panel .checkbox, .takaful-ui .takaful-checkbox-stack .checkbox { display: inline-flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 0; margin: 0; } .takaful-ui .takaful-select-panel .checkbox { border-bottom: 1px solid rgba(214, 222, 227, 0.95); } .takaful-ui .takaful-select-panel .checkbox:last-child { border-bottom: 0; } /* ============================================== Shared Radio-Inline Component ============================================== */ .takaful-ui .radio-inline { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 0; margin: 0; cursor: pointer; user-select: none; font-size: 14px; font-weight: 500; line-height: 1.4; } .takaful-ui .radio-inline input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .takaful-ui .radio-inline .checkmark { position: relative; order: -1; flex: 0 0 20px; width: 20px; height: 20px; top: auto; left: auto; background-color: #fff; border: 1.5px solid var(--takaful-border); border-radius: 50%; transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .takaful-ui .radio-inline .checkmark:after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; background: var(--takaful-primary); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; } .takaful-ui .radio-inline:hover .checkmark { border-color: var(--takaful-primary); box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.12); } .takaful-ui .radio-inline input:checked ~ .checkmark { border-color: var(--takaful-primary); box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.18); } .takaful-ui .radio-inline input:checked ~ .checkmark:after { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ============================================== Form Controls ============================================== */ .takaful-ui .form-control, .takaful-ui .form-select { text-align: start; direction: inherit; min-height: 48px; border: 1px solid var(--takaful-border); border-radius: var(--takaful-radius-input); color: var(--takaful-text); box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .takaful-ui .form-control::placeholder { text-align: start; direction: inherit; color: #98a2b3; } .takaful-ui .form-control:hover, .takaful-ui .form-select:hover { border-color: #bec8cf; } .takaful-ui .form-control:focus, .takaful-ui .form-select:focus { border-color: var(--takaful-primary); box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.16); } .takaful-ui .form-control.is-invalid, .takaful-ui .form-select.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12); } .takaful-ui .form-label { color: #334155; font-weight: 600; } .takaful-ui .input-group-text { background: #ffffff; border: 1px solid var(--takaful-border); color: #334155; } .takaful-ui .input-group > .input-group-text, .takaful-ui .input-group > .form-control, .takaful-ui .input-group > .form-select { min-height: 48px; } .takaful-ui .takaful-select2 + .select2-container { width: 100% !important; } .takaful-ui .form-select:not(.takaful-select2) { min-height: 48px; border: 1px solid var(--takaful-border); border-radius: var(--takaful-radius-input); color: var(--takaful-text); background-position: right 14px center; padding-inline: 14px 40px; } .takaful-ui .takaful-select2 + .select2-container .select2-selection--single { min-height: 48px; border: 1px solid var(--takaful-border); border-radius: var(--takaful-radius-input); background: #ffffff; display: flex; align-items: center; } .takaful-ui .takaful-select2 + .select2-container .select2-selection__rendered { width: 100%; padding-inline: 14px 40px; color: var(--takaful-text); line-height: 46px; } .takaful-ui .takaful-select2 + .select2-container .select2-selection__placeholder { color: #98a2b3; } .takaful-ui .takaful-select2 + .select2-container .select2-selection__arrow { height: 46px; right: 10px; } body[dir="rtl"] .takaful-ui .form-select:not(.takaful-select2) { background-position: left 14px center; padding-inline: 40px 14px; } body[dir="rtl"] .takaful-ui .takaful-select2 + .select2-container .select2-selection__rendered { padding-inline: 40px 14px; } body[dir="rtl"] .takaful-ui .takaful-select2 + .select2-container .select2-selection__arrow { left: 10px; right: auto; } .takaful-ui .select2-dropdown { border: 1px solid var(--takaful-border); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12); z-index: 1065; } .takaful-ui .select2-results__options { max-height: min(240px, calc(100dvh - 240px)); overscroll-behavior: contain; } .takaful-ui .select2-container--default .select2-results__option { padding: 10px 14px; } .takaful-ui .select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(140, 198, 63, 0.16); color: var(--takaful-text); } /* ============================================== File Upload Components ============================================== */ .takaful-ui .takaful-file-upload { position: relative; width: 100%; } .takaful-ui .takaful-file-input { position: absolute; top: 0; left: 0; right: 0; height: 52px; opacity: 0; cursor: pointer; z-index: 2; } .takaful-ui .takaful-file-ui { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-radius: 10px; border: 1px dashed #c5d2c9; background: #ffffff; transition: all 0.25s ease; } .takaful-ui .takaful-file-upload:hover .takaful-file-ui { border-color: var(--takaful-primary); background: #f7fbf3; } .takaful-ui .takaful-file-text { font-size: 14px; color: #6c757d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 70%; } .takaful-ui .takaful-file-btn { flex-shrink: 0; padding: 6px 14px; border-radius: 8px; background: linear-gradient(90deg, #a6d96a, #8cc63f); color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; } .takaful-ui .takaful-file-upload.has-file .takaful-file-ui { border-style: solid; border-color: var(--takaful-primary); background: #f9fff4; } .takaful-ui .takaful-file-upload.has-file .takaful-file-text { color: #000; font-weight: 500; } .takaful-ui .takaful-file-preview { margin-top: 10px; border: 1px solid var(--takaful-border); border-radius: 10px; background: #ffffff; padding: 8px; overflow: auto; -webkit-overflow-scrolling: touch; } .takaful-ui .takaful-file-preview-image { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; } .takaful-ui .takaful-file-preview-pdf { display: block; width: 100%; height: 260px; border: 0; border-radius: 8px; background: #ffffff; } .takaful-ui .takaful-file-preview-fallback { padding: 12px; font-size: 13px; color: var(--takaful-muted); text-align: center; border: 1px dashed #c5d2c9; border-radius: 8px; background: #f9fbf8; } /* ============================================== Primary CTA Button ============================================== */ .takaful-ui .btn-get { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 52px; border: none; border-radius: 999px; cursor: pointer; background: linear-gradient(90deg, #7fcfd6 0%, #7fbf3f 100% ); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); color: #ffffff; font-weight: 600; font-size: 15px; letter-spacing: 0.3px; box-shadow: 0 2px 6px rgba(127, 191, 63, 0.28); transition: all 0.2s ease; } .takaful-ui .btn-get:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 16px rgba(127, 191, 63, 0.22); } .takaful-ui .btn-get:active { filter: brightness(0.97); transform: translateY(0); } .takaful-ui .btn-get-outline { background: #ffffff; color: var(--takaful-primary-deep); border: 1px solid var(--takaful-primary); box-shadow: none; border-radius: 999px; } .takaful-ui .btn-get-outline:hover { background: #f5fbea; color: #1f8b4c; border-color: var(--takaful-primary-dark); box-shadow: 0 6px 12px rgba(121, 177, 49, 0.12); } .takaful-ui .btn-get-outline:active { background: #eef7df; color: var(--takaful-primary-deep); } .takaful-ui .btn-get:disabled { opacity: 0.6; cursor: not-allowed; } /* ============================================== Radio Person (pill-style radio) ============================================== */ .takaful-ui .radio-person { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--takaful-border); background: #ffffff; cursor: pointer; font-size: 14px; font-weight: 500; color: #475467; transition: all 0.2s ease; } .takaful-ui .radio-person input { display: none; } .takaful-ui .radio-person input:checked + span { color: var(--takaful-primary-deep); } .takaful-ui .radio-person:has(input:checked) { background: #f2f9e8; border-color: var(--takaful-primary-dark); box-shadow: 0 8px 16px rgba(121, 177, 49, 0.16), inset 0 0 0 1px rgba(140, 198, 63, 0.18); transform: translateY(-1px); } /* ============================================== Responsive Adjustments ============================================== */ @media (max-width: 1199.98px) { .takaful-ui .takaful-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(2):nth-child(3n + 1), .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(2):nth-child(3n + 2), .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(3):nth-child(3n + 1) { border-bottom: 1px solid rgba(214, 222, 227, 0.95); } .takaful-ui .takaful-summary-grid > .takaful-summary-card:nth-last-child(2):nth-child(2n + 1) { border-bottom: 0; } } @media (max-width: 767.98px) { .takaful-ui .motor-claims-form-body, .takaful-ui .container-grade-body, .takaful-ui .claim-policy-panel-body, .takaful-ui .mot-ins-hd { padding: 18px; } .takaful-ui .motor-claims-form-hd { margin-bottom: 18px; } .takaful-ui .takaful-summary-grid, .takaful-ui .takaful-check-grid { grid-template-columns: 1fr; } .takaful-ui .takaful-inline-inputs, .takaful-ui .takaful-actions, .takaful-ui .takaful-actions--split, .takaful-ui .takaful-radio-row, .takaful-ui .takaful-action-group { flex-direction: column; align-items: stretch; } .takaful-ui .takaful-primary-action, .takaful-ui .takaful-secondary-action, .takaful-ui .takaful-inline-button { width: 100% !important; } .takaful-ui .takaful-inline-inputs .input-group { flex: 0 0 auto; } .takaful-ui .btn-get, .takaful-ui .btn-get-outline, .takaful-ui .btn-takaful-outline { height: 56px; min-height: 56px; font-size: 15px; padding-inline: 16px; } .takaful-ui .takaful-section + .takaful-section { margin-top: 18px; padding-top: 18px; } .takaful-ui .takaful-select-panel, .takaful-ui .takaful-upload-block { padding: 14px; } } /* ============================================== Page Loader ============================================== */ body.takaful-loading-lock { overflow: hidden; touch-action: none; } .takaful-full-loader { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .takaful-full-loader.is-visible { display: flex; animation: takafulFadeIn 0.22s ease-out; } .takaful-full-loader__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.3) 0, transparent 44%), radial-gradient(circle at 85% 16%, rgba(140, 198, 63, 0.14) 0, transparent 42%), linear-gradient(135deg, rgba(160, 180, 196, 0.26) 0%, rgba(124, 147, 167, 0.32) 100%); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .takaful-full-loader__panel { position: relative; width: min(92vw, 540px); border-radius: 20px; border: 1px solid rgba(210, 224, 228, 0.95); background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%); box-shadow: 0 28px 72px rgba(15, 23, 42, 0.16), 0 6px 18px rgba(15, 23, 42, 0.08); padding: 24px 22px 20px; overflow: hidden; font-family: var(--primary-font-family, "Neo Sans Pro"), "Segoe UI", Tahoma, sans-serif; animation: takafulPanelIn 0.3s ease-out; } html[lang="ar"] .takaful-full-loader__panel { font-family: "Droid Arabic Kufi", var(--primary-font-family, "Neo Sans Pro"), "Segoe UI", Tahoma, sans-serif; } .takaful-full-loader__panel::before { content: ""; position: absolute; left: -35%; top: 0; width: 40%; height: 3px; background: linear-gradient(90deg, transparent 0%, #8cc63f 52%, #30b5e3 100%); animation: takafulSweep 1.8s linear infinite; } .takaful-full-loader__brand { position: relative; width: 150px; height: 150px; padding: 14px; box-sizing: border-box; margin: 0 auto 10px; display: grid; place-items: center; } .takaful-full-loader__brand::before { content: ""; position: absolute; inset: 18px; border-radius: 999px; background: radial-gradient(circle, rgba(140, 198, 63, 0.24) 0%, rgba(136, 184, 216, 0.07) 62%, transparent 100%); animation: takafulPulse 1.8s ease-in-out infinite; } .takaful-full-loader__logo { width: auto; height: auto; max-width: 78px; max-height: 78px; object-fit: contain; display: block; position: relative; z-index: 2; filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.14)); } .takaful-full-loader__logo-orbit { position: absolute; inset: 0; border-radius: 999px; border: 3px solid rgba(216, 228, 204, 0.86); border-top-color: #8cc63f; border-right-color: #88b8d8; animation: takafulSpin 1s linear infinite; } .takaful-full-loader__logo-orbit::after { content: ""; position: absolute; inset: 12px; border-radius: inherit; border: 2px dashed rgba(136, 184, 216, 0.42); animation: takafulSpinReverse 1.65s linear infinite; } .takaful-full-loader__title { font-family: inherit; font-size: 16px; font-weight: var(--font-weight-semibold, 600); color: #254418; text-align: center; line-height: 1.4; letter-spacing: 0.1px; margin-bottom: 12px; text-wrap: balance; } .takaful-full-loader__bar { height: 10px; border-radius: 999px; border: 1px solid rgba(160, 206, 120, 0.4); background: linear-gradient(90deg, #edf5e7 0%, #f8fcf5 48%, #edf5e7 100%); background-size: 220% 100%; animation: takafulShimmer 1.2s linear infinite; position: relative; overflow: hidden; margin-bottom: 13px; } .takaful-full-loader__bar::after { content: ""; position: absolute; top: 1px; left: -34%; width: 34%; height: calc(100% - 2px); border-radius: inherit; background: linear-gradient(90deg, rgba(48, 181, 227, 0.16) 0%, rgba(140, 198, 63, 0.46) 100%); animation: takafulBarRun 1.12s ease-in-out infinite; } .takaful-full-loader__skeleton { display: grid; gap: 8px; justify-items: center; } .takaful-full-loader__skeleton span { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #edf4e7 0%, #f9fcf6 50%, #edf4e7 100%); background-size: 220% 100%; animation: takafulShimmer 1.35s linear infinite; } .takaful-full-loader__skeleton span:nth-child(1) { width: 78%; } .takaful-full-loader__skeleton span:nth-child(2) { width: 92%; } .takaful-full-loader__skeleton span:nth-child(3) { width: 64%; } @keyframes takafulFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes takafulPanelIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes takafulSweep { 0% { left: -35%; } 100% { left: 105%; } } @keyframes takafulPulse { 0%, 100% { transform: scale(0.96); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } } @keyframes takafulShimmer { 0% { background-position: 220% 0; } 100% { background-position: -35% 0; } } @keyframes takafulBarRun { 0% { left: -34%; } 100% { left: 104%; } } @keyframes takafulSpin { to { transform: rotate(360deg); } } @keyframes takafulSpinReverse { to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .takaful-full-loader.is-visible, .takaful-full-loader__panel, .takaful-full-loader__panel::before, .takaful-full-loader__brand::before, .takaful-full-loader__logo-orbit, .takaful-full-loader__logo-orbit::after, .takaful-full-loader__bar, .takaful-full-loader__bar::after, .takaful-full-loader__skeleton span { animation: none !important; } } /* ========================= Summary & Review Components ========================= */ .takaful-summary-layout { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; } .takaful-summary-plan-title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.2; color: #111827; text-align: start; } .takaful-summary-plan-title-wrap { display: flex; align-items: center; gap: 12px; } .takaful-summary-plan-title-image { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; } .takaful-summary-plan-card { border: 1px solid #dbe3d8; border-radius: 14px; background: #ffffff; padding: 16px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05); } .takaful-summary-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #edf1ea; } .takaful-summary-plan-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: #111827; } .takaful-summary-plan-head .review-premium-value { min-height: 52px; } .takaful-summary-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .takaful-summary-bullets li { position: relative; padding-inline-start: 28px; font-size: 14px; line-height: 1.45; color: #667085; } .takaful-summary-bullets li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 18px; height: 20px; background: linear-gradient(180deg, #18bf18 0%, #0f8f0f 100%); clip-path: polygon(50% 0%, 90% 14%, 90% 56%, 50% 100%, 10% 56%, 10% 14%); box-shadow: 0 4px 8px rgba(31, 139, 76, 0.24); } .takaful-summary-bullets li::after { content: "\2713"; position: absolute; inset-inline-start: 4px; top: 3px; font-size: 11px; line-height: 1; color: #ffffff; font-weight: 800; } .takaful-summary-bullets strong { color: #111827; font-weight: 700; } .takaful-summary-addon-card { border: 1px solid #dbe3d8; border-radius: 12px; background: #ffffff; padding: 12px 14px; } .takaful-summary-addon-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: #111827; } .takaful-summary-addon-label { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #475467; text-align: start; } .takaful-summary-addon-benefits { margin: 0 0 12px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; color: #475467; font-size: 13px; } .takaful-summary-addon-benefits li { list-style: disc; line-height: 1.45; } .takaful-breakdown { border: 1px solid #e3f1d6; border-radius: 10px; background: rgba(249, 255, 244, 0.65); padding: 10px 12px; } .takaful-review-total-card { border: 1px solid #dfe8d1; border-radius: 14px; background: rgba(255, 255, 255, 0.78); padding: 14px 12px; } .takaful-review-medical-note { border: 0; border-inline-start: 4px solid var(--health-primary); border-radius: 8px; background: rgba(243, 249, 236, 0.9); color: #1f2937; font-size: 12px; font-weight: 400; font-style: italic; line-height: 1.45; padding: 10px 12px 10px 14px; } .takaful-review-total-price .amount { font-size: 42px; line-height: 1; color: #14b114; } .takaful-review-total-price .currency { font-size: 14px; color: #14b114; margin-inline-start: 4px; } .takaful-breakdown-card { border-radius: 14px; padding: 12px; } .takaful-breakdown-toggle { cursor: pointer; font-size: 14px; font-weight: 700; color: #2f4f1f; list-style: none; } .takaful-breakdown-toggle::-webkit-details-marker { display: none; } .takaful-breakdown-toggle::before { content: "+ "; color: #1f8b4c; } .takaful-breakdown[open] .takaful-breakdown-toggle::before { content: "- "; } .takaful-breakdown-content { display: flex; flex-direction: column; gap: 10px; } .takaful-review-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #dfe8d1; border-radius: 10px; background: rgba(249, 255, 244, 0.75); } .takaful-review-table { width: 100%; border-collapse: collapse; min-width: 420px; font-size: 13px; } .takaful-review-table th { background: linear-gradient(90deg, #8cc63f 0%, #79bd6b 100%); color: #ffffff; font-weight: 700; padding: 9px 10px; border: 1px solid #7db748; text-align: center; white-space: nowrap; } .takaful-review-table td { border: 1px solid #e4ecd9; padding: 9px 10px; vertical-align: middle; background: #ffffff; color: #1f2937; } .takaful-review-table-value { text-align: center; font-weight: 700; color: #1f8b4c; white-space: nowrap; } .takaful-review-table-ar { text-align: right; font-weight: 600; } .takaful-review-table-ar-only { text-align: right; font-weight: 600; } .takaful-review-table-total td { font-weight: 800; background: #f2f8eb; color: #2f4f1f; } @media (max-width: 575.98px) { .takaful-review-table-wrap { border: 0; background: transparent; overflow: visible; } .takaful-review-table { min-width: 0; border-collapse: separate; border-spacing: 0 8px; font-size: 12px; } .takaful-review-table thead { display: none; } .takaful-review-table tbody, .takaful-review-table tr, .takaful-review-table td { display: block; width: 100%; } .takaful-review-table tr { border: 1px solid #e4ecd9; border-radius: 10px; background: #ffffff; overflow: hidden; } .takaful-review-table td { border: 0; border-bottom: 1px solid #eef3e8; padding: 8px 10px; } .takaful-review-table td:first-child { background: #f9fcf4; color: #2f4f1f; font-weight: 700; } .takaful-review-table td:last-child { border-bottom: 0; text-align: left; color: #1f8b4c; font-weight: 700; } .takaful-review-table.is-ar td:last-child { text-align: right; } .takaful-review-table-total { border-color: #d4e6be; } .takaful-review-table-total td:first-child { background: #eef8de; } } .takaful-review-item { border: 1px solid #e4ecd9; border-radius: 12px; background: #ffffff; overflow: hidden; } .takaful-review-item__head { padding: 10px 12px; border-bottom: 1px solid #eef3e8; background: #f9fcf4; color: #2f4f1f; font-size: 13px; font-weight: 700; } .takaful-review-item__body { padding: 10px 12px; color: #475467; font-size: 13px; } .takaful-review-item__body strong { color: #1f2937; font-weight: 700; } .takaful-review-subrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .takaful-review-subrow + .takaful-review-subrow { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e8efe3; } @media (max-width: 768px) { .takaful-summary-plan-title { font-size: 24px; } .takaful-summary-plan-title-image { width: 36px; height: 36px; } .takaful-summary-plan-head { flex-direction: column; align-items: flex-start; } .takaful-summary-plan-head h3 { font-size: 22px; } .takaful-summary-addon-label { font-size: 16px; } }