/* ==========================================================================
   Shared quality layer for every vCard template (old and new).
   Loaded last, via resources/views/layouts/avp/vcard-common.blade.php.
   It fixes usability issues without changing each template's own look.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* no sideways wobble on phones */
}

/* Media never overflows the card */
img, video, iframe { max-width: 100%; }

/* Long emails / URLs wrap instead of breaking the layout */
a[href^="mailto:"], a[href^="http"], p, address { overflow-wrap: anywhere; }

/* Product and service photos are never cropped: each template keeps its frame, the whole image fits inside it */
.product-img img, .service-img img { object-fit: contain !important; }

/* Templates with full-width photo cards (vcard37): the frame also grows to the photo's own shape */
.product-box .product-img, .service-box .service-img {
    height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important;
}
.product-box .product-img img, .service-box .service-img img {
    display: block; width: 100% !important; height: auto !important; aspect-ratio: auto !important;
}

/* Payment QR codes: large and centred on their own row, below the icon and label */
.pl-strip:has(.pl-strip-content-img) { flex-wrap: wrap; }
.pl-strip:has(.pl-strip-content-img) .pl-strip-action { flex: 0 0 100%; margin-top: 14px; }
.pl-strip-content-img {
    display: block; width: 100%; max-width: 300px !important; height: auto; max-height: none !important; margin: 0 auto; object-fit: contain !important;
}

/* Visible keyboard focus (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid rgba(67, 56, 202, .45) !important;
    outline-offset: 2px;
}

/* Phones: 16px inputs stop iOS from zooming in, comfortable tap targets */
@media (max-width: 576px) {
    input.form-control, select.form-control, select.form-select, textarea.form-control { font-size: 16px !important; }
    .btn, button[type="submit"] { min-height: 44px; }
}

/* Toast messages: readable and on brand */
#toast-container > .toast { border-radius: 14px !important; box-shadow: 0 14px 32px -10px rgba(15, 26, 46, .3) !important; opacity: 1 !important; }

/* Modals open with rounded corners everywhere */
.modal-content { border-radius: 18px; overflow: hidden; }

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Printing a card gives a clean page */
@media print {
    .sticky-btn, .vcard-bars-btn, .vcard-bars-btn-left, .add-contact-btn, #toast-container, .modal, .language-btn { display: none !important; }
    body { background: #fff !important; }
}