/* =========================================
   OMAN PROJECTS CONNECTOR
   COMPLETE FRONTEND DESIGN
   ========================================= */

/* COLORS */

/* OPCP COLORS */

.opcp-card,
.opcp-dashboard {
    color: #26382F;
    border-color: #E2EAE5;
    background-color: #FFFFFF;
}

.opcp-card h2,
.opcp-dashboard h2 {
    color: #17204B;
}

.opcp-stat strong,
.opcp-project-row a {
    color: #1A8D8C;
}

.opcp-card button,
.opcp-button,
.opcp-actions a {
    background-color: #1A8D8C;
}

.opcp-card button:hover,
.opcp-button:hover,
.opcp-actions a:hover {
    background-color: #17204B;
}

/* =========================================
   1. GENERAL
   ========================================= */

.opcp-card,
.opcp-dashboard {
    direction: rtl;
    max-width: 1050px;
    margin: 35px auto;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid var(--opc-border);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(23,32,75,.06);
    color: var(--opc-text);
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.opcp-card h2,
.opcp-dashboard h2 {
    color: var(--opc-primary-dark);
    font-size: 25px;
    margin: 0 0 25px;
}

.opcp-card label {
    display: block;
    margin: 18px 0 8px;
    font-weight: 600;
    font-size: 14px;
}

.opcp-card input,
.opcp-card select,
.opcp-card textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--opc-border);
    border-radius: 9px;
    background: #FAFCFA;
    color: var(--opc-text);
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

.opcp-card textarea {
    min-height: 130px;
    resize: vertical;
}

.opcp-card input:focus,
.opcp-card select:focus,
.opcp-card textarea:focus {
    outline: 2px solid rgba(26,141,140,.2);
    border-color: var(--opc-primary);
}

/* =========================================
   2. BUTTONS
   ========================================= */

.opcp-card button,
.opcp-button,
.opcp-actions a {
    display: inline-block;
    border: 0;
    border-radius: 9px;
    padding: 13px 23px;
    margin-top: 18px;
    background: var(--opc-primary);
    color: #FFFFFF !important;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.opcp-card button:hover,
.opcp-button:hover,
.opcp-actions a:hover {
    background: var(--opc-primary-dark);
    transform: translateY(-2px);
}

.opcp-card .opcp-danger,
.opcp-project-row .opcp-danger {
    background: #FCECEC;
    color: var(--opc-danger) !important;
}

/* =========================================
   3. STATISTICS
   ========================================= */

.opcp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.opcp-stat {
    flex: 1 1 190px;
    padding: 25px;
    border-radius: 14px;
    background: #EFF7F8;
    box-sizing: border-box;
}

.opcp-stat span {
    display: block;
    color: var(--opc-muted);
}

.opcp-stat strong {
    display: block;
    margin-top: 12px;
    font-size: 32px;
    color: var(--opc-primary);
}

/* =========================================
   4. ACTIONS
   ========================================= */

.opcp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}

/* =========================================
   5. PROJECTS
   ========================================= */

.opcp-project-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--opc-border);
}

.opcp-project-row strong {
    flex: 1 1 220px;
}

.opcp-project-row a {
    color: var(--opc-primary);
    text-decoration: none;
    font-weight: 600;
}

.opcp-project-row form {
    margin: 0;
}

.opcp-project-row button {
    margin: 0;
}

/* =========================================
   6. LOGIN FULL PAGE BACKGROUND
   ========================================= */

body {
    background-color: #17204B;
}

.opcp-login-page {
    direction: rtl;
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 50px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(26,141,140,.65),
            transparent 40%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(23,32,75,.9),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #17204B,
            #1A8D8C
        );
}

.opcp-login-page * {
    box-sizing: border-box;
}

/* BLURRED LIGHTS */

.opcp-login-page::before,
.opcp-login-page::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.opcp-login-page::before {
    background: #1A8D8C;
    top: -100px;
    right: -100px;
}

.opcp-login-page::after {
    background: #17204B;
    bottom: -100px;
    left: -100px;
}

/* =========================================
   7. LOGIN CONTAINER
   ========================================= */

.opcp-login-container {
    direction: rtl;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* =========================================
   8. LOGIN TITLE
   ========================================= */

.opcp-login-left {
    background: transparent;
    position: static;
    width: 100%;
    height: auto;
    text-align: center;
}

.opcp-login-title {
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 800;
    margin: 0 0 12px;
}

.opcp-login-description {
    color: rgba(255,255,255,.85);
    font-size: 15px;
    line-height: 1.9;
    margin: 0 0 30px;
}

/* =========================================
   9. GLASS LOGIN CARD
   ========================================= */

.opcp-login-right {
    direction: rtl;
    position: relative;
    width: 100%;
    height: auto;
    padding: 40px 35px;
    border-radius: 24px;

    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.25);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    color: #FFFFFF;
}

.opcp-login-svg {
    display: none !important;
}

/* =========================================
   10. LOGIN FORM
   ========================================= */

.opcp-login-form {
    position: relative;
    width: 100%;
    margin: 0;
    z-index: 2;
}

.opcp-login-form form {
    margin: 0;
}

.opcp-login-form label {
    display: block;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    height: auto;
    margin: 22px 0 9px;
}

.opcp-login-form input[type="email"],
.opcp-login-form input[type="password"] {
    display: block;
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 0 16px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;

    color: #FFFFFF;
    font-size: 16px;
    font-family: Arial, sans-serif;

    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    transition: .3s ease;
}

.opcp-login-form input[type="email"]:focus,
.opcp-login-form input[type="password"]:focus {
    background: rgba(255,255,255,.2);
    border-color: #1A8D8C;
    box-shadow: 0 0 0 4px rgba(26,141,140,.2);
}

.opcp-login-form input[type="email"]::placeholder,
.opcp-login-form input[type="password"]::placeholder {
    color: rgba(255,255,255,.6);
}

/* =========================================
   11. LOGIN BUTTON
   ========================================= */

.opcp-login-form input[type="submit"] {
    display: block;
    width: 100%;
    height: 54px;
    min-height: 54px;
    margin-top: 30px;
    padding: 0 15px;

    background: linear-gradient(
        135deg,
        #1A8D8C,
        #22AAA5
    );

    border: none;
    border-radius: 12px;

    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    font-family: Arial, sans-serif;

    cursor: pointer;
    transition: .3s ease;
    box-shadow: 0 8px 20px rgba(26,141,140,.3);
}

.opcp-login-form input[type="submit"]:hover {
    background: #17204B;
    transform: translateY(-3px);
}

/* =========================================
   12. REGISTER LINK
   ========================================= */

.opcp-login-register {
    position: relative;
    z-index: 2;
    margin-top: 25px;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
}

.opcp-login-register a {
    color: #FFFFFF;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px solid #1A8D8C;
}

.opcp-login-register a:hover {
    color: #8DE3DD;
}

/* =========================================
   13. MOBILE
   ========================================= */

@media (max-width: 600px) {

    .opcp-login-page {
        min-height: 100vh;
        padding: 35px 15px;
    }

    .opcp-login-container {
        max-width: 100%;
    }

    .opcp-login-title {
        font-size: 29px;
    }

    .opcp-login-right {
        padding: 30px 22px;
        border-radius: 18px;
    }

    .opcp-card,
    .opcp-dashboard {
        margin: 20px 8px;
        padding: 19px;
        border-radius: 13px;
    }

    .opcp-card h2,
    .opcp-dashboard h2 {
        font-size: 21px;
    }

    .opcp-actions {
        flex-direction: column;
    }

    .opcp-actions a {
        text-align: center;
    }

}


/* إخفاء عنوان صفحة تسجيل الدخول */
.entry-title {
    display: none !important;
}

/* إزالة قيود عرض Astra */
.site-content,
.ast-container,
.content-area,
.site-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* تصميم تسجيل الدخول بكامل الشاشة */
.opcp-login-page {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
/* OPC LOGIN - FULL WIDTH FIX */

body .site,
body #page,
body .site-content,
body .ast-container,
body .content-area,
body .site-main,
body article,
body .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.opcp-login-page {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 20px !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.opcp-login-container {
    margin: 0 auto !important;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}
/* إزالة الفراغ العلوي المتبقي */
html,
body,
#page,
.site,
.site-content,
.ast-container,
.content-area,
.site-main,
article,
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.opcp-login-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh !important;
}



/* REGISTER PAGE */

#opcp-register-name {
    margin-bottom: 8px;
}

.opcp-login-page .opcp-login-container {
    min-height: 420px;
}

.opcp-login-page .opcp-login-right {
    min-height: 420px;
}

.opcp-login-page .opcp-login-form {
    position: relative;
    margin: 35px 40px;
    width: calc(100% - 80px);
}

.opcp-login-page .opcp-login-form input[type="submit"] {
    margin-top: 25px;
}

@media (max-width: 767px) {
    .opcp-login-page .opcp-login-container {
        height: auto;
        min-height: 700px;
    }

    .opcp-login-page .opcp-login-left {
        min-height: 250px;
    }

    .opcp-login-page .opcp-login-right {
        min-height: 450px;
    }
}

/* =================================
   OPCP MODERN DASHBOARD
================================= */

.opcp-dashboard-new {
    direction: rtl;
    width: 100%;
    max-width: 1100px;
    margin: 35px auto;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #E5EAF0;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(23,32,75,.07);
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

.opcp-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px;
    border-radius: 16px;
    background: linear-gradient(120deg,#17204B,#1A8D8C);
    color: #FFFFFF;
}

.opcp-dashboard-welcome {
    font-size: 14px;
    opacity: .85;
}

.opcp-dashboard-header h2 {
    color: #FFFFFF;
    font-size: 28px;
    margin: 12px 0;
}

.opcp-dashboard-header p {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    opacity: .9;
}

.opcp-dashboard-icon {
    width: 75px;
    height: 75px;
    min-width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.15);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
}

.opcp-dashboard-stats {
    display: flex;
    margin-top: 25px;
}

.opcp-dashboard-stat {
    width: 100%;
    padding: 25px;
    background: #F2F8F8;
    border: 1px solid #E0EEEE;
    border-radius: 15px;
}

.opcp-dashboard-stat span,
.opcp-dashboard-stat small {
    display: block;
    color: #74847A;
}

.opcp-dashboard-stat strong {
    display: block;
    margin: 12px 0;
    color: #1A8D8C;
    font-size: 38px;
}

.opcp-dashboard-section-title {
    color: #17204B;
    font-size: 21px;
    margin: 35px 0 20px;
}

.opcp-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    width: 100%;
}

.opcp-dashboard-action {
    flex: 1 1 220px;
    min-width: 0;
}

.opcp-dashboard-action {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 23px;
    min-height: 175px;
    background: #FFFFFF;
    border: 1px solid #E2EAEF;
    border-radius: 15px;
    text-decoration: none !important;
    transition: .25s ease;
}

.opcp-dashboard-action:hover {
    border-color: #1A8D8C;
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(26,141,140,.1);
}

.opcp-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #EAF5F5;
    color: #1A8D8C;
    font-size: 25px;
}

.opcp-dashboard-action strong {
    color: #17204B;
    font-size: 17px;
    margin-top: 18px;
}

.opcp-dashboard-action small {
    color: #74847A;
    font-size: 13px;
    margin-top: 8px;
}

.opcp-action-arrow {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #1A8D8C;
    font-size: 20px;
}

@media (max-width: 767px) {

    .opcp-dashboard-new {
        margin: 15px auto;
        padding: 15px;
    }

    .opcp-dashboard-header {
        padding: 22px;
    }

    .opcp-dashboard-header h2 {
        font-size: 22px;
    }

    .opcp-dashboard-icon {
        width: 55px;
        height: 55px;
        min-width: 55px;
        font-size: 15px;
    }

    .opcp-dashboard-actions {
    flex-direction: column;
}

.opcp-dashboard-action {
    width: 100%;
    flex: none;
}

    .opcp-dashboard-action {
        min-height: 155px;
    }

}

/* =====================================
   OPCP - MODERN PROJECTS PAGE
===================================== */

.opcp-projects-page {
    direction: rtl;
    width: 100%;
    max-width: 1100px;
    margin: 35px auto;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #E5EAF0;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(23,32,75,.07);
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* HEADER */

.opcp-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px;
    border-radius: 16px;
    background: linear-gradient(120deg,#17204B,#1A8D8C);
    color: #FFFFFF;
}

.opcp-projects-header span {
    font-size: 13px;
    opacity: .85;
}

.opcp-projects-header h2 {
    color: #FFFFFF;
    font-size: 27px;
    margin: 10px 0;
}

.opcp-projects-header p {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

.opcp-projects-add {
    display: inline-block;
    padding: 13px 20px;
    background: #FFFFFF;
    color: #17204B !important;
    border-radius: 9px;
    text-decoration: none !important;
    font-weight: bold;
    transition: .2s ease;
}

.opcp-projects-add:hover {
    background: #EAF5F5;
    transform: translateY(-2px);
}

/* SUMMARY */

.opcp-projects-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0;
    padding: 20px 24px;
    background: #F2F8F8;
    border: 1px solid #E0EEEE;
    border-radius: 14px;
}

.opcp-projects-summary span {
    color: #17204B;
    font-weight: 600;
}

.opcp-projects-summary strong {
    color: #1A8D8C;
    font-size: 30px;
}

/* PROJECT LIST */

.opcp-projects-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.opcp-project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E5EAF0;
    border-radius: 14px;
    transition: .2s ease;
}

.opcp-project-item:hover {
    border-color: #1A8D8C;
    box-shadow: 0 6px 20px rgba(26,141,140,.08);
}

/* PROJECT DETAILS */

.opcp-project-details {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1 1 220px;
    min-width: 0;
}

.opcp-project-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #EAF5F5;
    color: #1A8D8C;
    font-size: 24px;
}

.opcp-project-text {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.opcp-project-text strong {
    color: #17204B;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.opcp-project-text span {
    color: #74847A;
    font-size: 13px;
}

/* PROJECT BUTTONS */

.opcp-project-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.opcp-project-controls a,
.opcp-project-controls button {
    display: inline-block;
    padding: 10px 15px;
    border: 0;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: .2s ease;
}

.opcp-project-edit {
    background: #EAF5F5;
    color: #1A8D8C !important;
}

.opcp-project-view {
    background: #17204B;
    color: #FFFFFF !important;
}

.opcp-project-delete {
    background: #FCECEC;
    color: #C74343;
}

.opcp-project-controls a:hover,
.opcp-project-controls button:hover {
    opacity: .8;
    transform: translateY(-2px);
}

.opcp-project-controls form {
    margin: 0;
}

/* EMPTY STATE */

.opcp-projects-empty {
    text-align: center;
    padding: 55px 20px;
    background: #F8FAFC;
    border: 1px dashed #CBD8E0;
    border-radius: 15px;
}

.opcp-projects-empty-icon {
    color: #1A8D8C;
    font-size: 40px;
}

.opcp-projects-empty h3 {
    color: #17204B;
    font-size: 21px;
}

.opcp-projects-empty p {
    color: #74847A;
    font-size: 14px;
}

.opcp-projects-empty a {
    display: inline-block;
    margin-top: 12px;
    padding: 12px 20px;
    background: #1A8D8C;
    color: #FFFFFF !important;
    border-radius: 9px;
    text-decoration: none !important;
}

/* MOBILE */

@media (max-width: 767px) {

    .opcp-projects-page {
        margin: 15px auto;
        padding: 15px;
    }

    .opcp-projects-header {
        padding: 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .opcp-projects-header h2 {
        font-size: 23px;
    }

    .opcp-projects-add {
        text-align: center;
    }

    .opcp-project-item {
        flex-direction: column;
        align-items: stretch;
    }

    .opcp-project-controls {
        width: 100%;
    }

    .opcp-project-controls a,
    .opcp-project-controls button {
        flex: 1 1 auto;
        text-align: center;
    }

    .opcp-project-controls form {
        flex: 1 1 auto;
        display: flex;
    }

    .opcp-project-controls form button {
        width: 100%;
    }

}



/* =====================================
   OPCP - Oman Brand Glass Design
   ===================================== */

:root {
   color: #17204B;
   background-color: #1A8D8C;
   border-color: #54C3BD;
}

/* Dashboard Header */

.opcp-dashboard-header {
    background: linear-gradient(
        135deg,
        #17204B 0%,
        #1A8D8C 100%
    ) !important;

    border: 1px solid rgba(84,195,189,0.35);
    border-radius: 24px;
    padding: 35px !important;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(23,32,75,0.18);
}

/* Dashboard Logo */

.opcp-dashboard-icon {
    width: 180px !important;
    height: 180px !important;
    min-width: 180px;
    background: rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 24px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}

/* Dashboard Actions - Horizontal */

.opcp-dashboard-actions {
    display: grid !important;
    grid-template-columns: 33.33% 33.33% 33.33%;
    gap: 20px !important;
    width: 100%;
}

.opcp-dashboard-action {
    background: rgba(255,255,255,0.78) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(84,195,189,0.35) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    color: #17204B !important;
    box-shadow: 0 8px 25px rgba(23,32,75,0.07);
    transition: all 0.3s ease;
}

.opcp-dashboard-action:hover {
    transform: translateY(-6px);
    background: rgba(84,195,189,0.12) !important;
    border-color: #1A8D8C !important;
    box-shadow: 0 14px 30px rgba(26,141,140,0.15);
}

.opcp-action-icon {
    color: #1A8D8C !important;
    font-size: 30px !important;
}

.opcp-dashboard-action strong {
    color: #17204B !important;
}

.opcp-dashboard-action small {
    color: #887A79 !important;
}

/* Section Title */

.opcp-dashboard-section-title {
    color: #17204B !important;
    border-right: 4px solid #54C3BD;
    padding-right: 12px;
}

/* Logout Button */

.opcp-logout-form {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.opcp-logout-button {
    background: linear-gradient(
        135deg,
        #17204B,
        #1A8D8C
    ) !important;

    color: #ffffff !important;
    border: 1px solid rgba(84,195,189,0.55) !important;
    border-radius: 16px !important;
    padding: 14px 38px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    cursor: pointer;
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
    box-shadow: 0 8px 25px rgba(23,32,75,0.18);
    transition: all 0.3s ease;
}

.opcp-logout-button:hover {
    background: linear-gradient(
        135deg,
        #1A8D8C,
        #54C3BD
    ) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(26,141,140,0.25);
}

/* Responsive */


.opcp-dashboard-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100%;
}

    .opcp-dashboard-header {
        padding: 13px !important;
    }

    .opcp-dashboard-icon {
        width: 145px !important;
        height: 145px !important;
        min-width: 145px;
    }



.opcp-dashboard-action {
    flex: 1 1 200px !important;
    min-width: 0;
    box-sizing: border-box;
}

.opcp-dashboard-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    margin: 25px 0 !important;
}

.opcp-dashboard-stat {
    flex: 1 1 200px !important;
    box-sizing: border-box;
    padding: 25px !important;
    border-radius: 20px !important;
    background: linear-gradient(
        135deg,
        rgba(23,32,75,0.96),
        rgba(26,141,140,0.94)
    ) !important;
    border: 1px solid rgba(84,195,189,0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 25px rgba(23,32,75,0.12);
    color: #ffffff !important;
    text-align: center;
}

.opcp-dashboard-stat span {
    display: block;
    color: #ffffff !important;
    font-size: 16px;
    margin-bottom: 15px;
}

.opcp-dashboard-stat strong {
    display: block;
    color: #54C3BD !important;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 10px;
}

.opcp-dashboard-stat small {
    color: #ffffff !important;
    font-size: 13px;
}

.opcp-dashboard-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.opcp-dashboard-stat {
    flex: 1 1 200px !important;
    min-width: 0;
    box-sizing: border-box;
}

.opcp-dashboard-header {
    background: linear-gradient(
        135deg,
        #17204B,
        #1A8D8C
    ) !important;
    border-radius: 24px;
    padding: 35px !important;
    color: #fff;
    box-shadow: 0 12px 35px rgba(23,32,75,0.18);
}

.opcp-dashboard-header-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 22px;
}

.opcp-dashboard-logo {
    width: 240px;
    max-width: 90%;
    margin: 0 auto;
}

.opcp-dashboard-logo img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

.opcp-dashboard-welcome-content {
    width: 100%;
    text-align: center;
}

.opcp-dashboard-welcome-content .opcp-dashboard-welcome {
    color: #54C3BD !important;
    font-size: 19px;
    font-weight: 700;
}

.opcp-dashboard-welcome-content h2 {
    color: #ffffff !important;
    font-size: 20px;
    margin: 5px 0;
}

.opcp-dashboard-welcome-content p {
    color: #ffffff !important;
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
}

/* Center Dashboard Statistics */

.opcp-dashboard-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 30px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.opcp-dashboard-stat {
    flex: 1 1 200px !important;
    max-width: 280px !important;
    min-width: 180px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Center statistics content */

.opcp-dashboard-stat span,
.opcp-dashboard-stat strong,
.opcp-dashboard-stat small {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* Center Dashboard Header */

.opcp-dashboard-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.opcp-dashboard-header-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.opcp-dashboard-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 10px auto !important;
}

.opcp-dashboard-logo img {
    display: block !important;
    margin: 0 auto !important;
}

.opcp-dashboard-welcome-content {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.opcp-dashboard-welcome-content h2,
.opcp-dashboard-welcome-content p,
.opcp-dashboard-welcome-content span {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767px) {
    .opcp-login-left {
        padding-top: 70px !important;
    }
}

/* Logout Button - Glass Design */

.opcp-logout-header-form {
    margin: 0;
    padding: 0;
}

.opcp-logout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 12px 24px;
    border-radius: 14px;
    border: 1px solid rgba(84, 195, 189, .45);
    background: linear-gradient(
        135deg,
        rgba(23, 32, 75, .92),
        rgba(26, 141, 140, .88)
    );
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all .3s ease;
}

.opcp-logout-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(23, 32, 75, .2);
    background: linear-gradient(
        135deg,
        #1A8D8C,
        #17204B
    );
}

.opcp-logout-button span {
    font-size: 19px;
}

/* Mobile */
@media (max-width: 767px) {

    .opcp-projects-header-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .opcp-back-dashboard,
    .opcp-projects-add,
    .opcp-logout-header-form {
        flex: 1 1 30%;
    }

    .opcp-logout-button {
        width: 100%;
        min-height: 46px;
        padding: 10px 8px;
        font-size: 12px;
    }
}




/* AZRAA OMAN - ADD PROJECT */

.opcp-card {
    direction: rtl !important;
    background: rgba(23,32,75,.94) !important;
    border: 1px solid rgba(84,195,189,.4) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
    color: #fff !important;
}

/* Glass effect */
.opcp-card form {
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 18px !important;
    padding: 25px !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Headings */
.opcp-card h2,
.opcp-card h3 {
    color: #54C3BD !important;
}

/* Labels */
.opcp-card label {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Inputs */
.opcp-card input:not([type="submit"]),
.opcp-card select,
.opcp-card textarea {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Focus */
.opcp-card input:focus,
.opcp-card select:focus,
.opcp-card textarea:focus {
    border-color: #54C3BD !important;
    box-shadow: 0 0 0 4px rgba(84,195,189,.2) !important;
}

/* Placeholder */
.opcp-card input::placeholder,
.opcp-card textarea::placeholder {
    color: rgba(255,255,255,.65) !important;
}

/* Button */
.opcp-card button,
.opcp-card input[type="submit"] {
    background: linear-gradient(135deg,#1A8D8C,#54C3BD) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    transition: .3s ease;
}

.opcp-card button:hover,
.opcp-card input[type="submit"]:hover {
    background: #17204B !important;
    transform: translateY(-3px);
}

/* Mobile */
@media(max-width:767px) {
    .opcp-card {
        padding: 20px !important;
    }

    .opcp-card form {
        padding: 18px !important;
    }
}
/* Placeholder - Select Program */

.opcp-card select {
    color: #887A79 !important;
}

/* Selected option */
.opcp-card select option {
    color: #17204B !important;
    background: #FFFFFF !important;
}

/* Placeholder option */
.opcp-card select option[value=""] {
    color: #887A79 !important;
}

/* ==========================================
   AZRAA OMAN - ACCOUNT PAGE
   GLASSMORPHISM DESIGN
========================================== */

/* Account Main Container */
.woocommerce-account,
.woocommerce-account .site-content {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(26,141,140,.55),
            transparent 40%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(23,32,75,.9),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #17204B,
            #1A8D8C
        ) !important;
}

/* Main Account Area */
.woocommerce-account .woocommerce {
    direction: rtl;
    max-width: 1200px;
    margin: 40px auto !important;
    padding: 30px !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    color: #FFFFFF;
}

/* Account Navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 27%;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 10px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 15px 18px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    color: #FFFFFF !important;
    text-decoration: none;
    transition: .3s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: linear-gradient(
        135deg,
        #1A8D8C,
        #54C3BD
    );
    color: #17204B !important;
    border-color: #54C3BD;
    transform: translateX(-4px);
}

/* Account Content */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 70%;
    padding: 25px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    color: #FFFFFF !important;
}

/* Titles */
.woocommerce-account h1,
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-account .woocommerce-MyAccount-content strong {
    color: #FFFFFF !important;
}

/* Paragraphs */
.woocommerce-account .woocommerce-MyAccount-content p {
    color: rgba(255,255,255,.9) !important;
    line-height: 1.9;
}

/* Links */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: #54C3BD !important;
    font-weight: 600;
}

/* Form Labels */
.woocommerce-account form label {
    color: #FFFFFF !important;
    font-weight: 700;
    margin-bottom: 9px;
}

/* Form Inputs */
.woocommerce-account form input:not([type="submit"]):not([type="checkbox"]),
.woocommerce-account form select,
.woocommerce-account form textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    outline: none;
    box-shadow: none;
    transition: .3s ease;
}

.woocommerce-account form input:focus,
.woocommerce-account form select:focus,
.woocommerce-account form textarea:focus {
    background: rgba(255,255,255,.20) !important;
    border-color: #54C3BD !important;
    box-shadow: 0 0 0 4px rgba(84,195,189,.20) !important;
}

/* Placeholder */
.woocommerce-account form input::placeholder {
    color: rgba(255,255,255,.65) !important;
}

/* Buttons */
.woocommerce-account button,
.woocommerce-account input[type="submit"],
.woocommerce-account .button {
    background: linear-gradient(
        135deg,
        #1A8D8C,
        #54C3BD
    ) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 25px !important;
    font-weight: 700;
    transition: .3s ease;
    cursor: pointer;
}

.woocommerce-account button:hover,
.woocommerce-account input[type="submit"]:hover,
.woocommerce-account .button:hover {
    background: #17204B !important;
    transform: translateY(-3px);
}

/* Tables */
.woocommerce-account table {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.2) !important;
}

.woocommerce-account table th {
    color: #54C3BD !important;
}

.woocommerce-account table td {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* Select Options */
.woocommerce-account select option {
    background: #FFFFFF !important;
    color: #17204B !important;
}

/* Notices */
.woocommerce-account .woocommerce-message {
    background: rgba(84,195,189,.15) !important;
    border-top-color: #54C3BD !important;
    color: #FFFFFF !important;
}

.woocommerce-account .woocommerce-info {
    background: rgba(255,255,255,.12) !important;
    border-top-color: #54C3BD !important;
    color: #FFFFFF !important;
}

/* Mobile */
@media(max-width:767px) {

    .woocommerce-account .woocommerce {
        margin: 20px 10px !important;
        padding: 18px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 18px;
        margin-top: 20px;
    }

}