/* Additions for the rebuild. The original styles stay untouched in general.css / style.css */

/* Login: prefix select + phone number on one line, styled like the other inputs */
.authenticate-container-form .phone-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.authenticate-container-form .phone-row select {
    flex: 0 0 auto;
    margin-bottom: 10px;
    padding: 10px 0px;
    border: none;
    border-bottom: 1px solid #bdbfc1;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #000;
    font-family: var(--pk-font-body);
    font-size: 13.33px;
    transition: all 0.2s ease;
}

.authenticate-container-form .phone-row select:focus {
    border-color: var(--pk-color-focus);
}

.authenticate-container-form .phone-row input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

/* Scanner page (html5-qrcode) */
.pika-scanner {
    max-width: 480px;
    margin: 20px auto 0;
    padding: 25px 15px 0;
    text-align: center;
}

/* old .d-none has no !important, so it loses to display:flex below */
.pika-scanner .d-none {
    display: none !important;
}

/* square camera box, video fills it */
.scanner-box {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.pika-scanner #reader {
    width: 100% !important;
    height: 100%;
    border: none !important;
}

.pika-scanner #reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* guide frame in the middle (visual only, the whole picture is scanned) */
.scanner-frame {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.scanner-controls {
    display: flex;
    flex-direction: column;   /* zoom on top, the light button under it */
    align-items: center;
    gap: 12px;
    max-width: 380px;
    margin: 12px auto 0;
}

.scanner-controls .scanner-zoom {
    width: 100%;
}

.scanner-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    color: #262e40;
    font-size: 14px;
}

.scanner-zoom input {
    flex: 1 1 auto;
    accent-color: #df1a50;
}

.scanner-torch {
    border: 1px solid #df1a50;
    background: #fff;
    color: #df1a50;
    border-radius: 25px;
    padding: 6px 16px;
    font-family: var(--pk-font-body);
    cursor: pointer;
}

.scanner-torch.active {
    background: #df1a50;
    color: #fff;
}

.scanner-status {
    margin: 15px 0 5px;
    font-weight: 700;
    color: #262e40;
}

/* our apps: the phone's own scanner; this opens it again after "back" (front/js/scan.js) */
.scanner-native-btn {
    display: block;
    width: 100%;
    margin: 5px 0 15px;
}

.scanner-native-btn.d-none {
    display: none;
}

.scanner-hint {
    margin: 0 0 15px;
    font-size: 13px;
    color: #a9abae;
}

/* Green message box (same shape as the old .error-message, colour of the old account success box) */
.success-message {
    background: #7cb04d;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: -45px;
}

.success-message p {
    color: #fff;
    margin: 0;
    text-align: left;
}

/* Password reset */
.reset-sent-to {
    margin-top: 30px;
    text-align: center;
    color: #262e40;
}

.authenticate-container-form input.reset-code {
    text-align: center;
    font-size: 24px;
    letter-spacing: 12px;
    font-weight: 700;
}

.reset-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.reset-links button,
.reset-links a {
    background: none;
    border: 0;
    padding: 0;
    color: #df1a50;
    font-family: var(--pk-font-body);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.reset-links button:disabled {
    color: #a9abae;
    cursor: default;
}

/* Reset page: messages in normal flow (the old -45px pull-up overlapped the text below) */
.reset-page .error-message,
.reset-page .success-message {
    margin-bottom: 0;
}

.reset-page .authenticate-container-form {
    margin-top: 30px;
}

/* code field: letter-spacing adds space after the last digit too → pad left the same to stay centred */
.authenticate-container-form input.reset-code {
    padding-left: 12px;
}

/* resend button + "Ndrysho numrin" on one line, same size */
.reset-links {
    align-items: center;
}

.reset-links form {
    margin: 0;
    display: flex;
}

.reset-links button,
.reset-links a {
    line-height: 1.5;
}

/* 4 code boxes (style of the old app's code boxes: light grey border, red when filled) */
.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 10px 0 15px;
}

.authenticate-container-form input.otp-box {
    display: block;
    width: 58px;
    height: 64px;
    margin: 0;
    padding: 0;
    border: 2px solid #e6e7e8;
    border-radius: 6px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #262e40;
    background: #fff;
    caret-color: #df1a50;
}

.authenticate-container-form input.otp-box:focus {
    border-color: var(--pk-color-focus);
}

.authenticate-container-form input.otp-box.filled {
    border-color: #df1a50;
}

/* Required fields that were left empty / wrong (red) */
.authenticate-container-form input.is-invalid,
.authenticate-container-form select.is-invalid {
    border-bottom-color: #df1a50;
}

.authenticate-container-form input.is-invalid::placeholder {
    color: #df1a50;
}

.authenticate-container-form input.otp-box.is-invalid {
    border-color: #df1a50;
    background: #fdecef;
}

.field-error {
    color: #df1a50;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 10px;
}

/* Form fields (login, reset, ...) live in fields.css */

/* submit button while the form is being sent */
.main-btn.is-loading {
    opacity: .7;
    pointer-events: none;
}

/* Fonts (variables in fonts.css): body Kumbh Sans, headings Inter ExtraBold 800 */
body,
input,
select,
textarea,
button {
    font-family: var(--pk-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.main-title {
    font-family: var(--pk-font-heading);
    font-weight: 800;
}

/* Codes (manual QR code field, 4-digit SMS code): monospaced code font, every character same width */
.qr-code-input-container input.kodi,
.authenticate-container-form input.otp-box {
    font-family: var(--pk-font-code);
    font-weight: 700;
}

.qr-code-input-container input.kodi {
    letter-spacing: .12em;
}

.qr-code-input-container input.kodi::placeholder {
    font-family: var(--pk-font-body);
    letter-spacing: normal;
}

/* Manual code field: red when empty / wrong length (front/js/points-add.js) */
.qr-code-input-container input.kodi.is-invalid {
    border-color: #df1a50;
    background: #fdecef;
}

.shto-pike-manual .field-error {
    margin-top: -10px;
}

/* ==========================================================================
   Product catalog (list + detail) — views/client/products_*.php
   ========================================================================== */

/* back arrow row (views/client/page_back.php) */
.page-back {
    margin-top: 5px;
}

.page-back .katalogu-head span {
    color: #7e7e7e;
}

/* list: no photo → light grey box in place of the image */
.product-no-image {
    display: inline-block;
    width: 65px;
    height: 65px;
    border-radius: 6px;
    background: #f1f1f2;
}

/* detail */
.product-detail {
    margin-top: 20px;
}

.product-detail-body {
    margin-top: 20px;
}

.product-detail-points {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 25px;
    background: #fdecef;
    color: #262e40;
    font-size: 15px;
}

.product-detail-points b {
    color: #df1a50;
    font-family: var(--pk-font-heading);
    font-weight: 800;
    font-size: 18px;
}

.product-detail-text {
    margin: 18px 0 0;
    color: #262e40;
    font-size: 15px;
    line-height: 1.6;
}

.product-detail .njoftimet-content-options {
    margin-top: 25px;
}

/* photo slider (front/js/slider.js) */
.pk-slider {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f1f1f2;
    outline: none;
}

.pk-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.pk-slides::-webkit-scrollbar {
    display: none;
}

.pk-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* packshots: whole product visible, never cropped */
.pk-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pk-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 8px rgba(38, 46, 64, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pk-slider-btn img {
    width: 14px;
}

.pk-slider-prev {
    left: 10px;
}

.pk-slider-next {
    right: 10px;
}

.pk-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.pk-slider-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #df1a50;
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.pk-slider-dots button.active {
    width: 30px;
    background: #df1a50;
}

.pk-slider-count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(38, 46, 64, .7);
    color: #fff;
    font-size: 12px;
}

/* phones: arrows hidden, swipe instead */
@media (max-width: 480px) {
    .pk-slider-btn {
        display: none;
    }
}

/* ==========================================================================
   Client gifts (list + detail) — views/client/gifts_*.php (detail reuses .product-detail + slider)
   ========================================================================== */
.shperblimet-container .page-back {
    margin-bottom: 15px;
}

.gift-no-image {
    display: block;
    height: 45px;
    border-radius: 4px;
    background: #f1f1f2;
}

/* "you can get it" next to the points in the list */
.gift-can-get {
    display: inline-block;
    margin-left: 8px;
    padding: 5px 8px;
    border-radius: 30px;
    background: #73b23b;
    color: white;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    vertical-align: middle;
}

/* detail: enough / missing points */
.gift-status {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.gift-status-ok {
    background: #eef6e7;
    color: #4f7a2b;
}

.gift-status-missing {
    background: #fdecef;
    color: #b0143f;
}

/* Gift list: badge on the right (level with the name), photo fills its box (no padding) */
.shperblimet-container .shperblim-holder a {
    position: relative;
    display: block;
}

.shperblimet-container .dhurata-summary.has-badge {
    padding-right: 120px;
}

.shperblimet-container .gift-can-get {
    position: absolute;
    top: 2px;
    right: 0;
    margin: 0;
}

.shperblimet-container .dhurata-img-holder {
    padding: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.shperblimet-container .dhurata-img-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shperblimet-container .gift-no-image {
    height: 100%;
    border-radius: 0;
}

/* Gift list: photos 15% bigger (67px → 77px), text column follows */
.shperblimet-container .dhurata-img-holder {
    width: 120px;
}

.shperblimet-container .dhurata-summary {
    width: calc(100% - 77px);
}

/* Small phones: badge above the name instead of on the right */
@media (max-width: 480px) {
    .shperblimet-container .dhurata-summary.has-badge {
        padding-right: 0;
    }

    .shperblimet-container .gift-can-get {
        position: static;
        display: inline-block;
        margin: 0 0 4px;
        margin-top: 10px;
    }
}

/* Gift list: "not enough points" badge (red), longer → more room on the right */
.gift-cant-get {
    background: #fdecef;
    color: #b0143f;
}

.shperblimet-container .dhurata-summary.has-badge-long {
    padding-right: 190px;
}

@media (max-width: 480px) {
    .shperblimet-container .dhurata-summary.has-badge-long {
        padding-right: 0;
    }
}

/* old style.css forces .shperblim-holder .dhurata-summary { width: calc(100% - 67px) !important } (67px photo)
   → with the 77px photo the text wrapped under it; same weight to win */
.shperblimet-container .shperblim-holder .dhurata-summary {
    width: calc(100% - 120px) !important;
}

/* Back arrow row: on phones the red box touches the screen edge (old -20px + right corners only);
   on wider screens it stays inside the content with all corners rounded */
@media (min-width: 481px) {
    .katalogu-product-title {
        margin-left: 0;
    }

    .katalogu-backbox a {
        border-radius: 6px;
    }
}

/* Slider photos fill the whole frame (cover, no white bars), no border around the slider */
.pk-slider {
    border: 0;
}

.pk-slide img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
}

/* No photo: grey "crossed picture" icon (lists + detail pages) */
.gift-no-image,
.product-no-image,
.pk-no-image-icon {
    background-color: #f1f1f2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8bcc4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px;
}

.pk-no-image {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: #f1f1f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #a9abae;
    font-size: 14px;
}

.pk-no-image .pk-no-image-icon {
    width: 64px;
    height: 64px;
    background-size: 64px;
}

/* Phones: photo slider (and the "no photo" frame) edge to edge — out of the 20px .wrapper padding, square corners */
@media (max-width: 480px) {
    .product-detail .pk-slider,
    .product-detail .pk-no-image {
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
    }
}

/* Slider: no CSS smooth scroll (slider.js animates arrows/dots itself, swipe is native); quicker dot change */
.pk-slides {
    scroll-behavior: auto;
}

.pk-slider-dots button {
    transition: width .15s ease, background-color .15s ease;
}

/* ==========================================================================
   Gift list as cards (views/client/gifts_list.php)
   ========================================================================== */
.gift-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0 30px;
}

@media (min-width: 600px) {
    .gift-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

.gift-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(38, 46, 64, .08);
    overflow: hidden;
    text-decoration: none;
    color: #262e40;
    transition: box-shadow .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.gift-card:hover {
    box-shadow: 0 6px 18px rgba(38, 46, 64, .14);
}

/* tap feedback (no hover movement) */
.gift-card:active {
    transform: scale(.98);
}

.gift-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f1f1f2;
}

.gift-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: none;
    object-fit: cover;
}

.gift-card-img .gift-no-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-size: 40px;
}

.gift-card-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 4px 9px;
    border-radius: 20px;
    background: #7cb04d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.gift-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 12px 12px 14px;
}

.gift-card-name {
    font-size: 15px;
    line-height: 1.3;
    color: #262e40;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;   /* 2 lines → cards line up */
}

.gift-card-points {
    margin-top: 6px;
    color: #8a8f98;
    font-size: 13px;
}

.gift-card-points b {
    color: #df1a50;
    font-size: 15px;
    font-weight: 700;
    font-weight: 700;
}

.gift-card-progress {
    margin-top: auto;   /* bar at the bottom of the card */
    height: 5px;
    border-radius: 5px;
    background: #f1f1f2;
    overflow: hidden;
}

.gift-card-points + .gift-card-progress {
    margin-top: 10px;
}

.gift-card-progress span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: #df1a50;
}

.gift-card-progress.is-full span {
    background: #7cb04d;
}

.gift-card-missing {
    margin-top: 6px;
    color: #b0143f;
    font-size: 11px;
    line-height: 1.3;
}

/* Gift cards: ONE per row (all screens) — photo left, text right */
.gift-grid,
.gift-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

@media (min-width: 600px) {
    .gift-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

.gift-card {
    flex-direction: row;
    align-items: stretch;
    border: 1px solid #e5e5ef;
}

.gift-card-img {
    flex: 0 0 38%;
    max-width: 120px;
    aspect-ratio: 4 / 3;
}

.gift-card-body {
    justify-content: center;
    padding: 12px 14px;
    min-width: 0;
}

.gift-card-name {
    min-height: 0;
    font-size: 16px;
}

.gift-card-points + .gift-card-progress {
    margin-top: 10px;
}

.gift-card-progress {
    margin-top: 10px;
}

/* badge smaller on the narrower photo */
.gift-card-badge {
    left: 6px;
    top: 6px;
    padding: 3px 8px;
    font-size: 10px;
}

/* Gift cards: status text under the progress bar (green "Mund ta merrni" / red "Nuk keni…"), no badge on the photo */
.gift-card-status {
    margin-top: 6px;
    color: #8e8b8c;
    font-size: 11px;
    line-height: 1.3;
}

.gift-card-status.is-ok {
    color: #5e8f33;
}

/* Gift cards: points green when the client can take it, red when not */
.gift-card-points.is-ok b {
    color: #7cb04d;
    font-weight: 700;
}

.gift-card-points.is-missing b {
    color: #df1a50;
}

/* Gift cards: soft overlay on the photo (many are dark products on white → calmer, blends into the card).
   Change the strength in --gift-img-overlay */
.gift-card-img {
    --gift-img-overlay: linear-gradient(90deg, rgba(38, 46, 64, .08) 0%, rgba(38, 46, 64, .03) 100%, rgba(255, 255, 255, .55) 100%);
    overflow: hidden;
}

.gift-card-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gift-img-overlay);
    box-shadow: inset -1px 0 0 #f1f1f2;
    pointer-events: none;
}

/* Gift list: filter chips */
.gift-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 20px 0 0;
}

.gift-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid #e6e7e8;
    border-radius: 20px;
    background: #fff;
    color: #262e40;
    font-family: var(--pk-font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.gift-chip span {
    padding: 1px 7px;
    border-radius: 10px;
    background: #f1f1f2;
    color: #8a8f98;
    font-size: 12px;
}

.gift-chip.active {
    border-color: #df1a50;
    background: #df1a50;
    color: #fff;
}

.gift-chip.active span {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.gift-chips + .gift-chips-empty,
.gift-chips-empty {
    margin: 20px 0 0;
    padding: 16px;
    border-radius: 12px;
    background: #fdecef;
    color: #b0143f;
    text-align: center;
    font-size: 14px;
}

/* hidden cards must really hide (old .d-none has no !important; .gift-card is display:flex) */
.gift-card.d-none {
    display: none !important;
}

/* Reset page when recovery by SMS is off: message + call button */
.reset-off {
    margin-top: 30px;
    text-align: center;
}

.reset-off p {
    color: #262e40;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 20px;
}

.reset-off .reset-call-btn {
    display: inline-block;
    max-width: none;
    padding: 14px 24px;
    text-decoration: none;
}

/* Reset off: big number + Call / Copy side by side */
.reset-off-number {
    margin: 0 0 18px;
    color: #262e40;
    font-family: var(--pk-font-heading);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: .02em;
    user-select: all;   /* one tap selects the whole number */
}

.reset-off-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reset-off-actions .reset-call-btn {
    margin: 0;
}

.reset-copy-btn {
    padding: 14px 22px;
    border: 1.5px solid #df1a50;
    border-radius: 25px;
    background: #fff;
    color: #df1a50;
    font-family: var(--pk-font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.reset-copy-btn.is-done {
    border-color: #7cb04d;
    color: #5e8f33;
}

/* ==========================================================================
   Safe areas (phone status bar at the top, gesture / home bar at the bottom)
   The app WebViews draw under them → header and bottom bar move out of the way.
   viewport-fit=cover in views/client/header.php makes the phone report the sizes.
   ========================================================================== */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Android app: older WebViews report 0 even when drawing under the bars → minimum space */
body.in-app {
    --safe-top: max(env(safe-area-inset-top, 0px), 28px);
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
}

/* header (normal + sticky after scrolling) and the space below it */
.main-header {
    padding-top: calc(15px + var(--safe-top));
}

.main-header.header-sticky {
    padding-top: calc(5px + var(--safe-top));
}

.header-spacer,
.header-spacer.active {
    height: calc(68px + var(--safe-top));
}

/* slide-in menu starts below the status bar */
.slide-in-menu {
    padding-top: var(--safe-top);
    box-sizing: border-box;
}

/* bottom tab bar: red background goes under the gesture bar, icons stay above it */
.main-footer {
    padding-bottom: var(--safe-bottom);
}

body {
    padding-bottom: calc(130px + var(--safe-bottom));
}

/* pages without the fixed header (login, reset) */
body.no-header {
    padding-top: var(--safe-top);
}

/* ==========================================================================
   My account (views/client/account_edit.php)
   ========================================================================== */
.account-page .authenticate-container-form {
    margin-top: 20px;
}

.account-page .account-form + .account-form {
    margin-top: 35px;
}

.account-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(38, 46, 64, .08);
    padding: 20px 16px 4px;
    margin-bottom: 16px;
    border: 1px solid #dedede;
}

.account-card-title {
    margin: 0 0 18px;
    font-size: 17px;
    color: #262e40;
}

.account-page .account-msg {
    margin: 0 0 16px;
}

.account-page .main-btn {
    display: block;
    margin: 10px auto 0;
}

/* second button (password): outline, so the main "Ruaj" stands out */
.authenticate-container-form input.main-btn.main-btn-outline,
.main-btn.main-btn-outline {
    background: #fff;
    color: #df1a50;
    border: 1.5px solid #df1a50;
}

/* My account: space below the fixed header (the gift pages get it from .shperblimet-container) */
.account-page {
    padding-top: 30px;
}

/* Detail slider: soft overlay so white photos don't melt into the white page + dots readable at the bottom.
   Change the strength in --slide-overlay */
.pk-slider {
    --slide-overlay: linear-gradient(to bottom, rgba(38, 46, 64, .05) 0%, rgba(38, 46, 64, .05) 70%, rgba(38, 46, 64, .18) 100%);
}

.pk-slide {
    position: relative;
}

.pk-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--slide-overlay);
    pointer-events: none;
}

/* dots / arrows / counter above the overlay */
.pk-slider-btn,
.pk-slider-dots,
.pk-slider-count {
    z-index: 2;
}

.pk-slider-dots button {
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 0 0 1px rgba(38, 46, 64, .12);
}

/* ==========================================================================
   Notifications (views/client/notifications_*.php)
   ========================================================================== */
.notif-page {
    padding-top: 30px;
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 30px;
}

.notif-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(38, 46, 64, .08);
    text-decoration: none;
    color: #262e40;
    transition: box-shadow .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.notif-card:hover {
    box-shadow: 0 6px 18px rgba(38, 46, 64, .14);
}

.notif-card:active {
    transform: scale(.99);
}

/* speech-bubble icon in a soft circle (brand red when unread) */
.notif-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f1f1f2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

.notif-card.is-unread .notif-icon {
    background-color: #fdecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df1a50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M8.5 11h7M8.5 14h4'/%3E%3C/svg%3E");
}

.notif-body {
    flex: 1 1 auto;
    min-width: 0;
}

.notif-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.notif-title {
    font-size: 15px;
    font-weight: 400;
    color: #262e40;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card.is-unread .notif-title {
    font-weight: 700;
}

.notif-date {
    flex: 0 0 auto;
    color: #a9abae;
    font-size: 12px;
}

.notif-preview {
    margin-top: 4px;
    color: #8a8f98;
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-points {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 9px;
    border-radius: 10px;
    background: #eef6e7;
    color: #5e8f33;
    font-size: 12px;
    font-weight: 700;
}

.notif-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #df1a50;
}

/* room for the dot next to the date */
.notif-card.is-unread .notif-top {
    padding-right: 16px;
}

.notif-empty {
    margin: 40px 0;
    text-align: center;
    color: #8a8f98;
}

.notif-icon-big {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-size: 34px;
}

/* detail */
.notif-detail {
    margin: 20px 0 30px;
    padding: 20px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(38, 46, 64, .08);
}

.notif-detail-points {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 20px;
    background: #eef6e7;
    color: #4f7a2b;
    font-size: 14px;
}

.notif-detail-points b {
    font-family: var(--pk-font-heading);
    font-weight: 800;
}

.notif-detail-text {
    margin: 0;
    color: #262e40;
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
}

/* ==========================================================================
   Gift detail: take it / not enough + confirm modal (views/client/gifts_single.php, front/js/modal.js)
   ========================================================================== */
.gift-order-msg {
    margin: 0 0 16px;
}

.gift-action {
    margin: 24px 0 30px;
    padding-top: 24px;
    border-top: 1px solid #e6e7e8;
    text-align: center;
}

.gift-action-text {
    margin: 0 auto 16px;
    max-width: 320px;
    font-size: 15px;
    line-height: 1.4;
}

.gift-action-text.is-ok {
    color: #3f9a3a;
}

.gift-action-text.is-missing {
    color: #df1a50;
}

/* pill button: "Merre dhuratën ›" (red) / "Kthehu mbrapa" (grey) */
.gift-action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 290px;
    height: 50px;
    padding: 0 44px;
    box-sizing: border-box;
    border: 0;
    border-radius: 25px;
    background: #df1a50;
    color: #fff;
    font-family: var(--pk-font-body);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}

.gift-action-btn:hover {
    background: #c8164a;
}

.gift-action-btn:active {
    transform: scale(.98);
}

.gift-action-arrow {
    position: absolute;
    right: 22px;
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
}

.gift-action-btn.is-grey {
    background: #ececed;
    color: #262e40;
}

.gift-action-btn.is-grey:hover {
    background: #e2e2e4;
}

.gift-action-btn.is-loading,
.gift-action-btn:disabled {
    opacity: .7;
    pointer-events: none;
}

/* modal: brand-red tint over the page, white box in the middle */
.pk-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(160, 14, 52, .72);
    opacity: 0;
    transition: opacity .15s ease;
}

.pk-modal[hidden] {
    display: none;
}

.pk-modal.is-open {
    opacity: 1;
}

.pk-modal-box {
    width: 100%;
    max-width: 380px;
    padding: 34px 24px 20px;
    box-sizing: border-box;
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    transform: scale(.96);
    transition: transform .15s ease;
}

.pk-modal.is-open .pk-modal-box {
    transform: scale(1);
}

.pk-modal-title {
    margin: 0 0 18px;
    font-size: 22px;
    color: #262e40;
}

.pk-modal-text {
    margin: 0 0 26px;
    color: #262e40;
    font-size: 15px;
    line-height: 1.5;
}

.pk-modal-cancel {
    margin-top: 14px;
    padding: 10px 24px;
    border: 0;
    background: none;
    color: #262e40;
    font-family: var(--pk-font-body);
    font-size: 15px;
    cursor: pointer;
}

/* success page */
.gift-order-success-note {
    color: #8a8f98;
    font-size: 14px;
}

.gift-order-success .main-btn {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
}

/* Order success: the ordered gift as a card (same look as the gift list) */
.order-card {
    margin: 18px 0 22px;
    text-align: left;
}

.order-card .gift-card-body {
    justify-content: center;
}

/* order status pills (reused in "Dhuratat e mia") */
.order-status {
    align-self: flex-start;
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.order-status-pending {
    background: #fff4e0;
    color: #a86a00;
}

.order-status-processing {
    background: #e6f2fb;
    color: #1f6fa8;
}

.order-status-delivered {
    background: #eef6e7;
    color: #4f7a2b;
}

.order-status-unknown {
    background: #f1f1f2;
    color: #6b7079;
}

/* Order success reached by a double tap: info box (nothing ordered or charged twice) */
.order-duplicate {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #e6f2fb;
    color: #1f6fa8;
    font-size: 14px;
    text-align: left;
}

/* ==========================================================================
   My gifts / orders (views/client/orders_*.php) — cards reuse .gift-card, pills .order-status
   ========================================================================== */
.order-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.order-card-meta .order-status {
    margin-top: 0;
}

.order-card-date {
    color: #a9abae;
    font-size: 12px;
}

.orders-empty-icon {
    display: inline-block;
    width: 72px;
    height: 54px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.orders-empty-btn {
    margin-top: 10px;
}

.order-section {
    margin-top: 16px;
    padding-bottom: 18px;
}

/* timeline: dots on a line, last step = current (bigger dot) */
.order-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
}

.order-step:last-child {
    padding-bottom: 0;
}

/* line between the dots */
.order-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: #e6e7e8;
}

.order-step-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    border-radius: 50%;
    background: #d6d8db;
}

.order-step-pending .order-step-dot { background: #e0a020; }
.order-step-processing .order-step-dot { background: #1f6fa8; }
.order-step-delivered .order-step-dot { background: #7cb04d; }
.order-step-unknown .order-step-dot { background: #a9abae; }

.order-step.is-current .order-step-dot {
    box-shadow: 0 0 0 4px rgba(38, 46, 64, .08);
}

.order-step-title {
    font-weight: 700;
    color: #262e40;
    font-size: 15px;
}

.order-step-date {
    color: #a9abae;
    font-size: 12px;
    margin-top: 2px;
}

.order-step-note {
    margin-top: 4px;
    color: #6b7079;
    font-size: 13px;
}

/* delivery details */
.order-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 14px;
}

.order-details dt {
    color: #8a8f98;
}

.order-details dd {
    margin: 0;
    color: #262e40;
    word-break: break-word;
}

/* My gifts: order cards mirrored (photo right, text left) + parcel icon → clearly "requests", not the gift list */
.order-list-card {
    flex-direction: row-reverse;
}

.order-list-card .gift-card-img {
    --gift-img-overlay: linear-gradient(270deg, rgba(38, 46, 64, .08) 0%, rgba(38, 46, 64, .03) 65%, rgb(0 0 0 / 14%) 100%);
}

.order-list-card .gift-card-img::after {
    box-shadow: inset 1px 0 0 #f1f1f2;
}

.order-list-card .gift-card-points {
    margin-top: 2px;
}

.order-card-ref {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    color: #8a8f98;
    font-size: 12px;
}

/* parcel icon in a soft brand circle */
.order-card-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fdecef;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df1a50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

/* Order statuses: processed (blue) + onroad (purple), replacing "processing" */
.order-status-processed {
    background: #e6f2fb;
    color: #1f6fa8;
}

.order-status-onroad {
    background: #f3e9f7;
    color: #7b3f96;
}

.order-step-processed .order-step-dot { background: #1f6fa8; }
.order-step-onroad .order-step-dot { background: #8a4fa8; }

/* ==========================================================================
   Product catalog v2 (views/client/products_*.php) — packshots shown whole on white
   ========================================================================== */
.product-search {
    margin: 20px 0 0;
}

.product-search input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 16px 0 44px;
    box-sizing: border-box;
    border: 1.5px solid #e6e7e8;
    border-radius: 24px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
    color: #262e40;
    font-family: var(--pk-font-body);
    font-size: 16px;   /* ≥16px: no zoom on iPhone */
    outline: none;
    -webkit-appearance: none;
}

.product-search input:focus {
    border-color: var(--pk-color-focus);
    box-shadow: 0 0 0 3px var(--pk-color-focus-ring);
}

#productsEmpty {
    margin-top: 16px;
}

/* list card: packshot on white, whole product (contain) */
.product-card .product-card-img {
    flex: 0 0 34%;
    max-width: 170px;
    background: #fff;
}

.product-card .product-card-img::after {
    /* only the thin divider, no tint over packshots */
    background: none;
}

.product-card .product-card-img img {
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}

.product-card .product-no-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.product-card-desc {
    margin-top: 4px;
    color: #8a8f98;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-points-pill {
    align-self: flex-start;
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #eef6e7;
    color: #4f7a2b;
    font-size: 12px;
    font-weight: 700;
}

/* detail slider: whole packshot on white (gift photos use cover) */
.product-slider .pk-slide {
    background: #fff;
}

.product-slider .pk-slide img {
    object-fit: contain;
    padding: 6%;
    box-sizing: border-box;
}

.product-slider {
    box-shadow: 0 2px 10px rgba(38, 46, 64, .08);
}

/* earn points card */
.product-earn {
    margin-top: 16px;
    padding: 22px 18px;
    text-align: center;
}

.product-earn-points {
    color: #5e8f33;
    font-family: var(--pk-font-heading);
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
}

.product-earn-points span {
    font-size: 18px;
}

.product-earn-text {
    margin: 12px auto 18px;
    max-width: 320px;
    color: #262e40;
    font-size: 14px;
    line-height: 1.5;
}

.product-desc-card {
    margin-top: 16px;
    padding-bottom: 18px;
}

.product-desc-card .product-detail-text {
    margin: 0;
}

/* ==========================================================================
   Gift options: Numri / Madhësia / Dimensioni (views/client/gifts_single.php, front/js/gift-options.js)
   ========================================================================== */
.gift-options {
    margin: 22px 0 0;
}

.gift-option-group {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.gift-option-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    color: #262e40;
    font-family: var(--pk-font-heading);
    font-size: 16px;
    font-weight: 800;
}

.gift-option-hint {
    color: #8a8f98;
    font-family: var(--pk-font-body);
    font-size: 13px;
    font-weight: 400;
}

.gift-option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* one value = a pill (same look as the gift list chips); radio hidden, the pill is the button */
.gift-option {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.gift-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gift-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 42px;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1.5px solid #e6e7e8;
    border-radius: 21px;
    background: #fff;
    color: #262e40;
    font-family: var(--pk-font-body);
    font-size: 15px;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gift-option input:checked + span {
    border-color: #df1a50;
    background: #df1a50;
    color: #fff;
}

.gift-option input:focus-visible + span {
    outline: 2px solid #262e40;
    outline-offset: 2px;
}

/* not enough points: values only shown, not pickable */
.gift-option input:disabled + span {
    color: #8a8f98;
    cursor: default;
}

/* nothing picked when "Merre dhuratën" was tapped */
.gift-option-error {
    display: none;
    margin: 8px 0 0;
    color: #df1a50;
    font-size: 14px;
}

.gift-option-group.has-error .gift-option-error {
    display: block;
}

.gift-option-group.has-error .gift-option span {
    border-color: #df1a50;
}

/* confirm modal: the choice repeated */
.pk-modal-choice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: -10px 0 24px;
}

.pk-modal-choice > span {
    color: #8a8f98;
    font-size: 15px;
}

.pk-modal-choice b {
    margin-right: 10px;
    padding: 2px 12px;
    border-radius: 14px;
    background: #fdecef;
    color: #df1a50;
    font-size: 15px;
}

.pk-modal-choice b:last-child {
    margin-right: 0;
}

/* orders (success, "Dhuratat e mia", order detail): status pill, then the choice as plain text — "Në pritje  Madhësia: 33" */
.order-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 8px;
}

.order-card-meta .order-status {
    margin-top: 0;
}

.order-card-choice {
    color: #262e40;
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================================
   Help (views/client/help.php): contact card (phone + email from app_settings) + how-it-works cards
   ========================================================================== */
.help-contact {
    padding-bottom: 6px;
}

.help-contact-row {
    display: flex;
    gap: 14px;
    padding: 0 0 16px;
}

.help-contact-row + .help-contact-row {
    padding-top: 16px;
    border-top: 1px solid #f1f1f2;
}

/* icon in a soft brand circle (same idea as the notification icon) */
.help-contact-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fdecef;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

.help-contact-icon.is-phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df1a50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
}

.help-contact-icon.is-email {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df1a50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.help-contact-body {
    flex: 1 1 auto;
    min-width: 0;
}

.help-contact-label {
    color: #8a8f98;
    font-size: 13px;
}

.help-contact-value {
    display: block;
    margin: 2px 0 12px;
    color: #262e40;
    font-family: var(--pk-font-heading);
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.help-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.help-contact-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1.5px solid #df1a50;
    border-radius: 19px;
    background: #df1a50;
    color: #fff;
    font-family: var(--pk-font-body);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.help-contact-btn.is-outline {
    background: #fff;
    color: #df1a50;
}

/* copy done (copy.js adds is-done) */
.help-contact-btn.is-done {
    border-color: #7cb04d;
    background: #fff;
    color: #5e8f33;
}

.help-card {
    padding-bottom: 8px;
}

.help-card p {
    margin: 0 0 12px;
    color: #262e40;
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================================================================
   Sign up (views/register.php): same cards as "Llogaria ime"
   ========================================================================== */
.register-intro {
    margin: 10px 0 0;
    color: #8a8f98;
    font-size: 15px;
}

.register-intro b {
    color: #3f9a3a;
}

.register-form {
    margin-top: 30px;
}

/* honeypot: off screen, not display:none (some bots skip hidden fields) */
.register-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* number already registered → login / reset */
.register-exists {
    margin-top: 30px;
    padding: 20px 16px;
    border-radius: 14px;
    background: #fdecef;
    color: #262e40;
    text-align: center;
}

.register-exists p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

.register-exists-title {
    color: #b0143f;
    font-family: var(--pk-font-heading);
    font-weight: 800;
    font-size: 17px !important;
}

.register-exists a {
    color: #df1a50;
    font-weight: 700;
}

.register-exists-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.register-exists-actions .main-btn {
    display: inline-block;
    min-width: 200px;
    margin: 0;
    color: #fff;
    text-decoration: none;
}

.register-exists-link {
    padding: 8px 12px;
    text-decoration: none;
}

/* Cancelled order (admin cancelled it, points refunded): red pill + red dot in the timeline */
.order-status-cancelled {
    background: #fdecef;
    color: #b0143f;
}

.order-step-cancelled .order-step-dot { background: #df1a50; }

/* ==========================================================================
   Courier page (/order/delivered/ID, views/order_delivered.php): public, no header
   ========================================================================== */
.courier-page {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* content in the middle of the screen */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: center;
}

/* the cards keep their own left-aligned layout */
.courier-page .order-card,
.courier-page .order-section {
    text-align: left;
}

.courier-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.courier-head img {
    height: 42px;
}

.courier-title {
    margin: 8px 0 20px;
    color: #262e40;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.courier-for {
    margin-top: 4px;
    color: #6b7280;
    font-size: 14px;
}

.courier-for b {
    color: #262e40;
}

.courier-btn {
    max-width: none;
    margin: 4px 0 24px;
}

.courier-done {
    margin: 4px 0 24px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #eaf6e4;
    color: #3f7a2b;
    font-weight: 600;
    font-size: 15px;
}

.courier-done.is-cancelled {
    background: #fdecef;
    color: #df1a50;
}

.courier-msg {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
}

.courier-msg-ok {
    background: #eaf6e4;
    color: #3f7a2b;
}

.courier-msg-err {
    background: #fdecef;
    color: #df1a50;
}

.courier-text {
    color: #6b7280;
    font-size: 15px;
}


/* Kushtet e Shërbimit • Politika e Privacisë: small line at the bottom of every client page (views/client/footer.php) */
.legal-links {
    clear: both;
    padding: 24px 15px 10px;
    text-align: center;
    font-size: 12px;
    color: #a9abae;
}

.legal-links a {
    color: #a9abae;
    text-decoration: none;
}

.legal-links a:hover {
    color: #df1a50;
}

.legal-links span {
    margin: 0 6px;
}

/* the legal pages: lists inside the cards */
.legal-page .help-card ul {
    margin: 0 0 10px;
    padding-left: 18px;
}

.legal-page .help-card li {
    margin-bottom: 6px;
}

/* sign-up: "Duke u regjistruar, ju pranoni …" under the button (views/register.php) */
.register-consent {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    color: #a9abae;
}

form p.register-consent a {
    color: #df1a50;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: inherit;
}

/* web only: App Store + Google Play side by side, above the legal line (views/client/footer.php) */
.store-badges {
    clear: both;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 30px auto 0;
    padding: 0 15px;
}

.store-badges a {
    flex: 0 1 130px;
    max-width: 130px;
}

.store-badges img {
    display: block;
    width: 100%;
    height: auto;
}

/* pages without the bottom menu (login, sign-up, reset, terms when logged out): full-height column, so the
   store badges + terms line (.page-bottom, views/client/footer.php) sit at the bottom of the screen on short pages */
body.no-header {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding-bottom: var(--safe-bottom);   /* no bottom menu here: not the 130px the menu needs */
}

body.no-header > .wrapper,
body.no-header > div {
    width: 100%;
    min-width: 0;   /* flex items don't shrink below their widest content otherwise (the phone field) */
    box-sizing: border-box;
}

body.no-header > .page-bottom {
    margin-top: auto;
    padding-bottom: 16px;
}