/**
 * PRK Order Tracking Styles - V2 (Professional & 3D Enhanced)
 * Target: Modern, professional, attractive, 3D-feel, optimized, no external libraries.
 */

/* Modal Overlay */
.prk-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Enable scroll if modal content is too long */
    background-color: rgba(33, 37, 41, 0.75); /* Darker, slightly desaturated overlay for better focus and "depth" */
    direction: rtl; /* Right-to-left for Persian */
    font-family: 'IRANSans', 'Tahoma', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* transition: opacity 0.3s ease-out; // Optional: for JS-controlled fade of overlay itself */
}

/* Modal Content Box - Core of the "3D" and professional look */
.prk-modal-content {
    background-color: #FFFFFF; /* Clean white background */
    /* A very subtle gradient can add to the "surface" feel */
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FDFEFF 100%);
    margin: 7% auto; /* Adjust vertical centering, allow space for animation */
    padding: 0; /* Padding will be handled by header/body/footer */
    border: none; /* Remove basic border, rely on shadow for separation */
    width: 90%;
    max-width: 540px; /* Slightly wider for a more spacious feel */
    border-radius: 14px; /* Softer, more modern corners */
    box-shadow:
        /* Inner subtle highlight for top edge - simulates light reflection */
        /* inset 0 1px 0px rgba(255, 255, 255, 0.7), */
        /* Main shadows for depth and "lifted" effect */
        0 2px 8px rgba(50, 50, 93, 0.1), /* Near, sharper shadow */
        0 10px 25px rgba(50, 50, 93, 0.15), /* Main lift shadow */
        0 25px 50px rgba(0, 0, 0, 0.1); /* Softer, more spread out shadow for depth */
    position: relative;
    animation-name: prk-modal-entry;
    animation-duration: 0.45s; /* Slightly faster animation */
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* Fast-out, slow-in like feel (Material Design inspired) */
    animation-fill-mode: forwards;
    text-align: right;
    overflow: hidden; /* Ensure border-radius clips content like header background */
}

/* Entry Animation */
@keyframes prk-modal-entry {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97); /* Start slightly lower and smaller */
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Header */
.prk-modal-header {
    padding: 22px 30px; /* More generous padding */
    background-color: #F8F9FC; /* Light, clean background, distinct from modal body */
    border-bottom: 1px solid #E9EEF2; /* Softer, lighter border color */
}

.prk-modal-header h3 {
    margin: 0;
    font-size: 21px; /* Balanced font size */
    font-weight: 600; /* Semi-bold for clarity and professionalism */
    color: #343F56; /* Darker, sophisticated grey for header text */
    line-height: 1.4;
}

/* Close Button (X) - Absolutely positioned */
.prk-modal-close {
    position: absolute;
    top: 12px; /* Fine-tuned position */
    right: 15px; /* For RTL, this is the visual left */
    background: transparent;
    border: none;
    width: 36px; /* Clickable area */
    height: 36px; /* Clickable area */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px; /* Icon size */
    font-weight: 400; /* Standard weight for '×' symbol */
    color: #90A0B7; /* Muted, professional color for the icon */
    padding: 0;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%; /* Circular hover effect */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 10; /* Ensure it's above header background */
}

.prk-modal-close:hover,
.prk-modal-close:focus {
    background-color: #E9EEF2; /* Subtle background on hover */
    color: #343F56; /* Darken icon on hover */
    transform: rotate(90deg); /* Add a slight rotation for flair */
    outline: none;
}

/* Modal Body */
.prk-modal-body {
    padding: 25px 30px; /* Consistent padding with header */
    font-size: 16px;
    line-height: 1.75; /* Improved readability */
    color: #5A687F; /* Softer, professional grey for body text */
}

.prk-modal-body p {
    margin-top: 0;
    margin-bottom: 15px; /* More space between paragraphs */
}
.prk-modal-body p:last-child {
    margin-bottom: 0;
}

/* Updated Style for Order Status Display */
.prk-modal-body strong {
    display: inline-block; /* Allows padding, margin, and keeps it in flow */
    padding: 12px 28px;   /* Generous padding for a "large button" feel */
    font-weight: 600;     /* Bold text for status */
    font-size: 1em;       /* Same font size as surrounding text, or adjust as needed e.g., 0.95em */
    color: #FFFFFF;       /* White text color for contrast */
    text-align: center;
    text-decoration: none; /* Remove any potential underlines */
    border-radius: 30px;  /* "Almost round" - creates a pill/stadium shape */
    line-height: 1.5;     /* Ensures text is well-centered vertically */
    position: relative;   /* For potential future pseudo-elements or layering */
    overflow: hidden;     /* Ensures gradient stays within rounded borders */

    /* Animated Turquoise Gradient Background */
    /* A vibrant and flowing turquoise gradient */
    background: linear-gradient(
        135deg,       /* Angle of the gradient */
        #29E8C8,      /* Bright, slightly greenish turquoise */
        #1DD8F0,      /* Bright, slightly bluish turquoise / cyan */
        #15B8D8,      /* Deeper blue turquoise */
        #40F0E0,      /* Lighter, vibrant turquoise */
        #29E8C8       /* Repeating the first color for a seamless loop */
    );
    background-size: 350% 350%; /* Must be larger than 100% for the animation to show movement */
    animation: prkStatusFlowingGradient 10s ease-in-out infinite;

    /* 3D Button Effect - "Protruding" and "Chic" look */
    /* A combination of outer and inner shadows for a sophisticated 3D effect */
    box-shadow:
        /* Outer shadow for lift and a subtle turquoise glow */
        0 5px 12px rgba(20, 190, 200, 0.25), /* Soft turquoise-tinted shadow for depth */
        0 2px 5px rgba(0, 0, 0, 0.1),        /* Nearer, sharper shadow for definition */
        /* Inner shadows for bevelling and light reflection, creating the 3D surface */
        inset 0 2px 3px rgba(255, 255, 255, 0.3),  /* Top-left inner highlight (simulates light reflection) */
        inset 0 -2px 4px rgba(0, 0, 0, 0.12);      /* Bottom-right inner shadow (simulates curvature) */

    /* A very subtle border can enhance the edge definition if desired, but shadows mostly handle this. */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */ /* Example: subtle light border */
}

/* Keyframes for the "alive" animated gradient background */
@keyframes prkStatusFlowingGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Modal Footer */
.prk-modal-footer {
    padding: 20px 30px; /* Consistent padding */
    background-color: #F8F9FC; /* Consistent with header */
    border-top: 1px solid #E9EEF2; /* Softer border */
    text-align: right; /* For RTL: Aligns button(s) to the visual left (end of the line) */
}

/* Button in Footer - Enhanced "3D" and professional style */
.prk-modal-footer .prk-modal-close-button {
    background-color: #007AFF; /* A vibrant, professional blue (e.g., iOS blue) */
    color: white;
    padding: 12px 28px; /* Generous padding for a premium feel */
    border: none;
    border-radius: 8px; /* Modern rounded corners */
    cursor: pointer;
    font-size: 15px;
    font-weight: 500; /* Medium weight for button text */
    line-height: 1.5;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.15s ease-out;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05), /* Subtle top shadow for edge definition */
        0 3px 6px rgba(0, 122, 255, 0.25), /* Colored shadow for vibrancy and lift */
        inset 0 -1px 1px rgba(0, 0, 0, 0.08); /* Slight bottom inner shadow for 3D edge */
}

.prk-modal-footer .prk-modal-close-button:hover,
.prk-modal-footer .prk-modal-close-button:focus {
    background-color: #0069D9; /* Darker blue on hover/focus */
    color: white;
    outline: none;
    transform: translateY(-1px); /* Slight lift on hover */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.07),
        0 5px 10px rgba(0, 105, 217, 0.3), /* Enhanced colored shadow */
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

.prk-modal-footer .prk-modal-close-button:active {
    background-color: #0056B3; /* Even darker blue when pressed */
    transform: translateY(1px); /* "Pressed down" effect */
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.15), /* Inner shadow for pressed effect */
        0 1px 2px rgba(0, 122, 255, 0.15); /* Reduced outer shadow */
}

/* Styles for specific content within the modal message, if needed */
#prk-modal-message .prk-order-detail {
    margin-bottom: 12px; /* Increased spacing */
    font-size: 15px;
}
#prk-modal-message .prk-order-detail-label {
    font-weight: 600;
    color: #343F56; /* Consistent with header text color */
    margin-left: 8px; /* Space between label and value (visual right in RTL) */
}
#prk-modal-message .prk-order-detail-value {
    color: #5A687F; /* Consistent with body text color */
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .prk-modal-content {
        margin: 8% auto;
        width: 92%;
        max-width: none;
        border-radius: 12px;
    }

    .prk-modal-header {
        padding: 18px 22px;
    }
    .prk-modal-header h3 {
        font-size: 19px;
    }
    .prk-modal-close {
        top: 10px;
        right: 12px; /* Adjust for smaller screens */
        width: 32px;
        height: 32px;
        font-size: 26px;
    }

    .prk-modal-body {
        padding: 20px 22px;
        font-size: 15px;
    }

    .prk-modal-footer {
        padding: 18px 22px;
    }
    .prk-modal-footer .prk-modal-close-button {
        padding: 10px 22px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .prk-modal-content {
        margin: 5% auto; /* Closer to top on very small screens */
        width: 95%;
        border-radius: 10px; /* Slightly smaller radius */
        animation-duration: 0.35s; /* Faster animation */
    }
     .prk-modal-header {
        padding: 15px 18px;
    }
     .prk-modal-header h3 {
        font-size: 17px;
    }
    .prk-modal-close {
        top: 8px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 24px;
    }
    .prk-modal-body {
        padding: 18px;
        font-size: 14px;
        line-height: 1.65;
    }
    .prk-modal-footer .prk-modal-close-button {
        width: 100%; /* Make button full-width */
        text-align: center;
        padding: 12px 15px; /* Adjust padding for full width */
        font-size: 15px; /* Slightly larger for easier tapping */
    }
    .prk-modal-footer {
         padding: 15px 18px;
         text-align: center; /* Center the full-width button */
    }
}