/* need to create custom color variables */

:root {


    /* Pico Colors */
    --pico-background-color: #fff;
    --pico-color: #373c44;
    --pico-text-selection-color: rgba(2, 154, 232, 0.25);
    --pico-muted-color: #646b79;
    --pico-muted-border-color: #e7eaf0;
    --pico-primary: #55a6e6 !important;
    --pico-primary-background: #55a6e6 !important;
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: rgba(1, 114, 173, 0.5);
    --pico-primary-hover: #015887;
    --pico-primary-hover-background: #02659a;
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: rgba(2, 154, 232, 0.5);
    --pico-primary-inverse: #fff;

    /* Main Colors */
    --puny-blue: #55a6e6;
    --puny-red: #ff5c57;
    --puny-green: #4cd0b6;
    --puny-yellow: #fab900;
    --puny-blue-2: #6aafca;
    --puny-white: #f7f3d5;
    
    /* Color Shades */
    /* Blue Tones */
    --puny-blue-10: #E8F4FD;
    --puny-blue-20: #D1E9FB;
    --puny-blue-30: #A3D3F7;
    --puny-blue-40: #75BDF3;
    --puny-blue-50: #55A6E6;
    --puny-blue-60: #4485B8;
    --puny-blue-70: #33648A;
    --puny-blue-80: #22435C;
    --puny-blue-90: #11222E;
    
    /* Red Tones */
    --puny-red-10: #FFE6E4;
    --puny-red-20: #FFCDC9;
    --puny-red-30: #FF9B93;
    --puny-red-40: #FF695D;
    --puny-red-50: #FF6F61;
    --puny-red-60: #CC594E;
    --puny-red-70: #99433A;
    --puny-red-80: #662D27;
    --puny-red-90: #331713;
    
    /* Green Tones */
    --puny-green-10: #E6FBF7;
    --puny-green-20: #CCF7EF;
    --puny-green-30: #99EFDF;
    --puny-green-40: #66E7CF;
    --puny-green-50: #4CD0B6;
    --puny-green-60: #3DA692;
    --puny-green-70: #2E7D6E;
    --puny-green-80: #1F5349;
    --puny-green-90: #0F2A25;
    
    /* Yellow Tones */
    --puny-yellow-10: #FEF9E6;
    --puny-yellow-20: #FDF3CC;
    --puny-yellow-30: #FBE799;
    --puny-yellow-40: #F9DB66;
    --puny-yellow-50: #FAB900;
    --puny-yellow-60: #C89400;
    --puny-yellow-70: #966F00;
    --puny-yellow-80: #644A00;
    --puny-yellow-90: #322500;
    
    /* Modal Wizard Specific Colors */
    --puny-green-700: #3ba892;
    --puny-blue-600: #4495d6;
    --puny-blue-700: #3684c5;
    
    /* Semantic Colors (Per PRD) */
    --success: var(--puny-green);
    --error: var(--puny-red);
    --warning: var(--puny-yellow);
    --info: var(--puny-blue);

    /* Colors for Shadow Boxes */
    --puny-blue-box-shadow: #55a6e6aa;
    --puny-red-box-shadow: #ff5c57aa;
    --puny-green-box-shadow: #4cd0b6aa;
    --puny-yellow-box-shadow: #fab900aa;
    --puny-blue-2-box-shadow: #6aafcaaa;
    --puny-black-box-shadow: #888888aa;

    /* Font-size */
    --pico-font-size:15px !important;
    

    --pico-font-family: 'Nunito', sans-serif; 
    font-family: 'Nunito', sans-serif;


    /* Theme Colors */

    /* Connect Blue */
    --puny-blue-900: #11212E;
    --puny-blue-800: #22425C;
    --puny-blue-700: #33648A;
    --puny-blue-600: #4485B8;
    --puny-blue-500: #55a6e6;
    --puny-blue-400: #66AFE9;
    --puny-blue-300: #88C1EE;
    --puny-blue-200: #AAD3F3;
    --puny-blue-100: #CCE4F8;
    --puny-blue-50: #EEF6FD;

    /* Secondary */
    /* Puny Pulse; */
    --puny-red-900: #331211;
    --puny-red-800: #662523;
    --puny-red-700: #993734;
    --puny-red-600: #CC4A46;

    --puny-red-500: #FF5C57;
    --puny-red-400: #FF6D6A;
    --puny-red-300: #FF8F8C;
    --puny-red-200: #FFB1AF;
    --puny-red-100: #FFD3D2;
    --puny-red-50: #FFEFEE;

    /* Link Aqua */

    --puny-aqua-900: #0F2A24;
    --puny-aqua-800: #1E5349;
    --puny-aqua-700: #2E7D6D;
    --puny-aqua-600: #3DA692;

    --puny-aqua-500: #4CD0B6;
    --puny-aqua-400: #5CDBBF;
    --puny-aqua-300: #7DE3D3;
    --puny-aqua-200: #9DEBE7;
    --puny-aqua-100: #BEF3FB;
    --puny-aqua-50: #EDFAF8;

    /* Puny Spark */

    --puny-yellow-900: #322500;
    --puny-yellow-800: #644A00;
    --puny-yellow-700: #966F00;
    --puny-yellow-600: #C89400;
    
    --puny-yellow-500: #FAB900;
    --puny-yellow-400: #FBC01A;
    --puny-yellow-300: #fcce4d;
    --puny-yellow-200: #FDDC80;
    --puny-yellow-100: #EDDDB1;
    --puny-yellow-50: #FFF8E6;


    /* Tertiariary */

    /* Puny Light */

    --puny-light-blue-900: #152328;
    --puny-light-blue-800: #2A4651;
    --puny-light-blue-700: #406979;
    --puny-light-blue-600: #558CA2;

    --puny-light-blue-500: #6AAFCA;
    --puny-light-blue-400: #79B7CF;
    --puny-light-blue-300: #97C7DA;
    --puny-light-blue-200: #B5D7E5;
    --puny-light-blue-100: #D2E7EF;
    --puny-light-blue-50: #F0F7FA;

    /* Puny Creamy */

    --puny-cream-900: #31312B;
    --puny-cream-800: #636155;
    --puny-cream-700: #949280;
    --puny-cream-600: #C6C2AA;

    --puny-cream-500: #F7F3D5;
    --puny-cream-400: #F8F4D9;
    --puny-cream-300: #F9F7E2;
    --puny-cream-200: #FBF9EA;
    --puny-cream-100: #FDFBF2;
    --puny-cream-50: #FEFEFB;


    /* Greys */

    /* Puny Black */

    --puny-black: #000000;
    --puny-black-900: #212529;
    --puny-black-800: #343A40;
    --puny-black-700: #495057;
    --puny-black-600: #ADB5BD;
    --puny-black-500: #CED4DA;
    --puny-black-400: #DEE2E6;
    --puny-black-300: #70757A;
    --puny-black-200: #83888D;
    --puny-white: #969B9F;


}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #1E1E1E;
    --secondary-color: #FF5C57;
    --accent-color: #4CD0B6;
    --background-color: #121212;
    --text-color: #ffffff;
  }
  


[data-theme="connect-blue"] {

    --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015);
    --pico-h1-color: var(--puny-blue-500) !important;
    --pico-h2-color: #55a6e6 !important;
    --pico-h3-color: #55a6e6 !important;
    --pico-h4-color: #55a6e6 !important;
    --pico-h5-color: #55a6e6 !important;
    --pico-h6-color: #55a6e6 !important;
    --pico-mark-background-color: #014063 !important;
    --pico-mark-color: #fff !important;
    --pico-ins-color: #9DEBE7 !important;
    --pico-del-color: #FFB1AF !important;
    --pico-blockquote-border-color: var(--pico-muted-border-color);
    --pico-blockquote-footer-color: var(--pico-muted-color);
    --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-table-border-color: var(--pico-muted-border-color);
    --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
    --pico-code-background-color: #1a1f28;
    --pico-code-color: #8891a4;
    --pico-code-kbd-background-color: var(--pico-color);
    --pico-code-kbd-color: var(--pico-background-color);
    --pico-form-element-background-color: #1c212c;
    --pico-form-element-selected-background-color: #2a3140;
    --pico-form-element-border-color: #2a3140;
    --pico-form-element-color: #e0e3e7;
    --pico-form-element-placeholder-color: #8891a4;
    --pico-form-element-active-background-color: #1a1f28;
    --pico-form-element-active-border-color: var(--pico-primary-border);
    --pico-form-element-focus-color: var(--pico-primary-border);
    --pico-form-element-disabled-opacity: 0.5;
    --pico-form-element-invalid-border-color: #964a50;
    --pico-form-element-invalid-active-border-color: #b7403b;
    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
    --pico-form-element-valid-border-color: #2a7b6f;
    --pico-form-element-valid-active-border-color: #16896a;
    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
    --pico-switch-background-color: #333c4e;
    --pico-switch-checked-background-color: var(--pico-primary-background);
    --pico-switch-color: #fff;
    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-range-border-color: #202632;
    --pico-range-active-border-color: #2a3140;
    --pico-range-thumb-border-color: var(--pico-background-color);
    --pico-range-thumb-color: var(--pico-secondary-background);
    --pico-range-thumb-active-color: var(--pico-primary-background);
    --pico-accordion-border-color: var(--pico-muted-border-color);
    --pico-accordion-active-summary-color: var(--pico-primary-hover);
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-muted-color);
    --pico-card-background-color: #181c25;
    --pico-card-border-color: var(--pico-card-background-color);
    --pico-card-box-shadow: var(--pico-box-shadow);
    --pico-card-sectioning-background-color: #1a1f28;
    --pico-dropdown-background-color: #181c25;
    --pico-dropdown-border-color: #202632;
    --pico-dropdown-box-shadow: var(--pico-box-shadow);
    --pico-dropdown-color: var(--pico-color);
    --pico-dropdown-hover-background-color: #202632;
    --pico-loading-spinner-opacity: 0.5;
    --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
    --pico-progress-background-color: #202632;
    --pico-progress-color: var(--pico-primary-background);
    --pico-tooltip-background-color: var(--pico-contrast-background);
    --pico-tooltip-color: var(--pico-contrast-inverse);


    a {
        --pico-text-decoration: underline;
    }
    a.secondary, a.contrast {
        --pico-text-decoration: underline;
    }
    
    small {
        --pico-font-size: 0.875em;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --pico-font-weight: 700;
        color: var(--puny-blue-500) !important;
    }
    
    h1 {
        --pico-font-size: 2rem;
        --pico-line-height: 1.125;
        --pico-typography-spacing-top: 3rem;
        color: var(--pico-h1-color) !important;
    }
    
    h2 {
        --pico-font-size: 1.75rem;
        --pico-line-height: 1.15;
        --pico-typography-spacing-top: 2.625rem;
        color: var(--pico-h2-color) !important;
    }
    
    h3 {
        --pico-font-size: 1.5rem;
        --pico-line-height: 1.175;
        --pico-typography-spacing-top: 2.25rem;
        color: var(--pico-h3-color) !important;
    }
    
    h4 {
        --pico-font-size: 1.25rem;
        --pico-line-height: 1.2;
        --pico-typography-spacing-top: 1.874rem;
        color: var(--pico-h4-color) !important;
    }
    
    h5 {
        --pico-font-size: 1.125rem;
        --pico-line-height: 1.225;
        --pico-typography-spacing-top: 1.6875rem;
        color: var(--pico-h5-color) !important;
    }
    
    h6 {
        --pico-font-size: 1rem;
        --pico-line-height: 1.25;
        --pico-typography-spacing-top: 1.5rem;
        color: var(--pico-h6-color) !important;
    }
    
    thead th,
    thead td,
    tfoot th,
    tfoot td {
        --pico-font-weight: 600;
        --pico-border-width: 0.1875rem;
    }
    
    pre,
    code,
    kbd,
    samp {
        --pico-font-family: var(--pico-font-family-monospace);
    }
    
    kbd {
        --pico-font-weight: bolder;
    }
    
    input:not([type=submit],
    [type=button],
    [type=reset],
    [type=checkbox],
    [type=radio],
    [type=file]),
    :where(select, textarea) {
        --pico-outline-width: 0.0625rem;
    }
    
    [type=search] {
        --pico-border-radius: 5rem;
    }
    
    [type=checkbox],
    [type=radio] {
        --pico-border-width: 0.125rem;
    }
    
    [type=checkbox][role=switch] {
        --pico-border-width: 0.1875rem;
    }
    
    details.dropdown summary:not([role=button]) {
        --pico-outline-width: 0.0625rem;
    }
    
    nav details.dropdown summary:focus-visible {
        --pico-outline-width: 0.125rem;
    }
    
    [role=search] {
        --pico-border-radius: 5rem;
    }
    
    [role=search]:has(button.secondary:focus,
    [type=submit].secondary:focus,
    [type=button].secondary:focus,
    [role=button].secondary:focus),
    [role=group]:has(button.secondary:focus,
    [type=submit].secondary:focus,
    [type=button].secondary:focus,
    [role=button].secondary:focus) {
        --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
    }
    [role=search]:has(button.contrast:focus,
    [type=submit].contrast:focus,
    [type=button].contrast:focus,
    [role=button].contrast:focus),
    [role=group]:has(button.contrast:focus,
    [type=submit].contrast:focus,
    [type=button].contrast:focus,
    [role=button].contrast:focus) {
        --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
    }
    [role=search] button,
    [role=search] [type=submit],
    [role=search] [type=button],
    [role=search] [role=button],
    [role=group] button,
    [role=group] [type=submit],
    [role=group] [type=button],
    [role=group] [role=button] {
        --pico-form-element-spacing-horizontal: 2rem;
    }
    
    details summary[role=button]:not(.outline)::after {
    filter: brightness(0) invert(1);
    }

    [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
    filter: brightness(0) invert(1);
    }
}
/* End of Connect Blue */


[data-theme="d-nuevo"] {

    --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 9, 12, 0.06), 0 0 0 0.0625rem rgba(7, 9, 12, 0.015);
    --pico-h1-color: var(--puny-blue-500) !important;
    --pico-h2-color: #55a6e6 !important;
    --pico-h3-color: #55a6e6 !important;
    --pico-h4-color: #55a6e6 !important;
    --pico-h5-color: #55a6e6 !important;
    --pico-h6-color: #55a6e6 !important;
    --pico-mark-background-color: #014063 !important;
    --pico-mark-color: #fff !important;
    --pico-ins-color: #9DEBE7 !important;
    --pico-del-color: #FFB1AF !important;
    --pico-blockquote-border-color: var(--pico-muted-border-color);
    --pico-blockquote-footer-color: var(--pico-muted-color);
    --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-table-border-color: var(--pico-muted-border-color);
    --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
    --pico-code-background-color: #1a1f28;
    --pico-code-color: #8891a4;
    --pico-code-kbd-background-color: var(--pico-color);
    --pico-code-kbd-color: var(--pico-background-color);
    --pico-form-element-background-color: #1c212c;
    --pico-form-element-selected-background-color: #2a3140;
    --pico-form-element-border-color: #2a3140;
    --pico-form-element-color: #e0e3e7;
    --pico-form-element-placeholder-color: #8891a4;
    --pico-form-element-active-background-color: #1a1f28;
    --pico-form-element-active-border-color: var(--pico-primary-border);
    --pico-form-element-focus-color: var(--pico-primary-border);
    --pico-form-element-disabled-opacity: 0.5;
    --pico-form-element-invalid-border-color: #964a50;
    --pico-form-element-invalid-active-border-color: #b7403b;
    --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
    --pico-form-element-valid-border-color: #2a7b6f;
    --pico-form-element-valid-active-border-color: #16896a;
    --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
    --pico-switch-background-color: #333c4e;
    --pico-switch-checked-background-color: var(--pico-primary-background);
    --pico-switch-color: #fff;
    --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    --pico-range-border-color: #202632;
    --pico-range-active-border-color: #2a3140;
    --pico-range-thumb-border-color: var(--pico-background-color);
    --pico-range-thumb-color: var(--pico-secondary-background);
    --pico-range-thumb-active-color: var(--pico-primary-background);
    --pico-accordion-border-color: var(--pico-muted-border-color);
    --pico-accordion-active-summary-color: var(--pico-primary-hover);
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-muted-color);
    --pico-card-background-color: #181c25;
    --pico-card-border-color: var(--pico-card-background-color);
    --pico-card-box-shadow: var(--pico-box-shadow);
    --pico-card-sectioning-background-color: #1a1f28;
    --pico-dropdown-background-color: #181c25;
    --pico-dropdown-border-color: #202632;
    --pico-dropdown-box-shadow: var(--pico-box-shadow);
    --pico-dropdown-color: var(--pico-color);
    --pico-dropdown-hover-background-color: #202632;
    --pico-loading-spinner-opacity: 0.5;
    --pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
    --pico-progress-background-color: #202632;
    --pico-progress-color: var(--pico-primary-background);
    --pico-tooltip-background-color: var(--pico-contrast-background);
    --pico-tooltip-color: var(--pico-contrast-inverse);


    a {
        --pico-text-decoration: underline;
    }
    a.secondary, a.contrast {
        --pico-text-decoration: underline;
    }
    
    small {
        --pico-font-size: 0.875em;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        --pico-font-weight: 700;
        color: var(--puny-blue-500) !important;
    }
    
    h1 {
        --pico-font-size: 2rem;
        --pico-line-height: 1.125;
        --pico-typography-spacing-top: 3rem;
        color: var(--pico-h1-color) !important;
    }
    
    h2 {
        --pico-font-size: 1.75rem;
        --pico-line-height: 1.15;
        --pico-typography-spacing-top: 2.625rem;
        color: var(--pico-h2-color) !important;
    }
    
    h3 {
        --pico-font-size: 1.5rem;
        --pico-line-height: 1.175;
        --pico-typography-spacing-top: 2.25rem;
        color: var(--pico-h3-color) !important;
    }
    
    h4 {
        --pico-font-size: 1.25rem;
        --pico-line-height: 1.2;
        --pico-typography-spacing-top: 1.874rem;
        color: var(--pico-h4-color) !important;
    }
    
    h5 {
        --pico-font-size: 1.125rem;
        --pico-line-height: 1.225;
        --pico-typography-spacing-top: 1.6875rem;
        color: var(--pico-h5-color) !important;
    }
    
    h6 {
        --pico-font-size: 1rem;
        --pico-line-height: 1.25;
        --pico-typography-spacing-top: 1.5rem;
        color: var(--pico-h6-color) !important;
    }
    
    thead th,
    thead td,
    tfoot th,
    tfoot td {
        --pico-font-weight: 600;
        --pico-border-width: 0.1875rem;
    }
    
    pre,
    code,
    kbd,
    samp {
        --pico-font-family: var(--pico-font-family-monospace);
    }
    
    kbd {
        --pico-font-weight: bolder;
    }
    
    input:not([type=submit],
    [type=button],
    [type=reset],
    [type=checkbox],
    [type=radio],
    [type=file]),
    :where(select, textarea) {
        --pico-outline-width: 0.0625rem;
    }
    
    [type=search] {
        --pico-border-radius: 5rem;
    }
    
    [type=checkbox],
    [type=radio] {
        --pico-border-width: 0.125rem;
    }
    
    [type=checkbox][role=switch] {
        --pico-border-width: 0.1875rem;
    }
    
    details.dropdown summary:not([role=button]) {
        --pico-outline-width: 0.0625rem;
    }
    
    nav details.dropdown summary:focus-visible {
        --pico-outline-width: 0.125rem;
    }
    
    [role=search] {
        --pico-border-radius: 5rem;
    }
    
    [role=search]:has(button.secondary:focus,
    [type=submit].secondary:focus,
    [type=button].secondary:focus,
    [role=button].secondary:focus),
    [role=group]:has(button.secondary:focus,
    [type=submit].secondary:focus,
    [type=button].secondary:focus,
    [role=button].secondary:focus) {
        --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
    }
    [role=search]:has(button.contrast:focus,
    [type=submit].contrast:focus,
    [type=button].contrast:focus,
    [role=button].contrast:focus),
    [role=group]:has(button.contrast:focus,
    [type=submit].contrast:focus,
    [type=button].contrast:focus,
    [role=button].contrast:focus) {
        --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
    }
    [role=search] button,
    [role=search] [type=submit],
    [role=search] [type=button],
    [role=search] [role=button],
    [role=group] button,
    [role=group] [type=submit],
    [role=group] [type=button],
    [role=group] [role=button] {
        --pico-form-element-spacing-horizontal: 2rem;
    }
    
    details summary[role=button]:not(.outline)::after {
    filter: brightness(0) invert(1);
    }

    [aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
    filter: brightness(0) invert(1);
    }
}
/* End of D-Nuevo */


    /* The Rest */
    
@media (max-width: 768px) {
    :root {
        --pico-font-size:15px !important;
    
    }

}

@media (max-width: 450px) {
    :root {
        --pico-font-size:13px !important;
    
    }

}


@media (max-width: 320px) {
    :root {
        --pico-font-size:12px !important;
    
    }

}

.puny-icon-x-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem !important;
    height: 1.2rem !important;
    font-size: 0.9rem;
}

.puny-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem !important;
    height: 1.6rem !important;
    font-size: 1.2rem;
}


.puny-icon-medium {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem !important;
    height: 1.8rem !important;
    font-size: 1.8rem;
}

.puny-icon-medium-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem !important;
    height: 2rem !important;
    font-size: 1.6rem;
}

.puny-icon-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 1.9rem; /* Different size to make the fontawesome icon look the same as others */
}

.puny-icon-x-large {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem !important;
    height: 3.5rem !important;
    font-size: 3.5rem;
}

.intercom-lightweight-app-launcher {
    bottom: 120px !important;
}


.ql-snow .ql-picker { 
    height: 100% !important;
    margin-right: 4px;
}


.ql-picker-label {
    background-color: white !important;
    color: black !important;
    padding: 0 !important;
    width: fit-content !important;
}

.ql-picker-label svg {
    position: relative !important;
    margin-top: -4px !important;
    width: 100%;
}

.ql-picker-item {
    background-color: white;
    color: black;
    border: none;
}

.ql-snow .ql-picker-label::before {
    width: fit-content !important;
    min-width: 90px !important;
}

.ql-snow .ql-picker.ql-font {
    width: fit-content !important;
}

.ql-snow .ql-picker.ql-header {
    width: fit-content !important;
}

.ql-font .ql-picker-label, .ql-header .ql-picker-label{
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
}

.ql-container {
    min-height: 100px;
}








h1, h2, h3, h4, h5, h6, h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span {
    font-family: "Nunito", serif !important;
    font-optical-sizing: auto !important;
    font-weight: 800 !important;
    font-style: normal !important;
    
}

p, a, span, label, input, select, textarea, button, a[role="button"], summary  {
    font-family: 'Nunito', serif;
    font-optical-sizing: auto;
    font-weight: 600;
    
    
}

/* article > hgroup > i {
    background-color: var(--puny-blue) !important;
    color: var(--puny-white);
} */


#gridstack-mobile {
    display: block;
    width: 100%;
}

#gridstack-desktop {
    display: none;
    width: 100%;
}

#desktop-grid-selector-container {
    display: none; 
    width: 100%; 
    flex-direction: row; 
    justify-content: center; 
    margin-bottom: 6vh;
}

#grid-options-container {
    display: flex; 
    flex-direction: row;
    align-items: center;
    width: fit-content; 
    padding: 0.12rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 32px;
    background-color: rgba(0, 0, 0, 0.03);
}

#grid-options-container > span {
    color: rgba(0, 0, 0, 0.50);
    font-weight: 800; 
    padding: 0.5rem 1.5rem;
    cursor: default;
}

.selected-grid {
    background-color: rgba(0, 0, 0, 0.18) !important;
    border-radius: 24px;
    color: rgba(0, 0, 0, 0.60) !important;
}



main.container {
    /* max-width: 730px !important; */
    max-width: 1024px !important;
}

#puny-logo-animation {
    animation: growShrink 2s infinite ease-in-out;
}

@keyframes growShrink {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


@media screen and (max-width: 800px) {
    main.container {
        max-width: 450px !important;
        /* width: 100% !important; */
    }
    
}



html {
    --font-size: 5px;
}

/* Loading animation container - always transparent to clicks */
#puny-logo-animation-container-grid {
    pointer-events: none !important;
    z-index: -1 !important;
}

button, article, i, a[role="button"] {
    border-radius: 20px !important;
}

img, figure {
    border-radius: 12px !important;
    object-fit: cover;
}
/* Line clamp */
.truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1; /* Number of lines to show */
    line-clamp: 1; /* Non-prefixed version, for future-proofing */
    word-break: break-all;
}

/* Line clamp */
.truncate-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2; /* Number of lines to show */
    line-clamp: 2; /* Non-prefixed version, for future-proofing */
}

/* Line clamp */
.truncate-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3; /* Number of lines to show */
    line-clamp: 3; /* Non-prefixed version, for future-proofing */
}

/* Line clamp */
.truncate-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 4; /* Number of lines to show */
    line-clamp: 4; /* Non-prefixed version, for future-proofing */
}

.form-input, .text-input {
    background-color: #F8F8F8;
    border: 2px solid rgba(0, 0, 0, 0.01);
    border-radius: 18px !important;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    padding: 1.2rem !important;
}

input.form-input:is([type='text'], [type='password'], [type='email'], [type='number'], [type='tel'], [type='url'], [type='search']), .form-input[custom-form-input], select.form-input {
    height: auto !important;
    aspect-ratio: 5.7;
    max-height: 64px;
}

.form-input:focus, .text-input:focus {
    box-shadow: unset;
}

.form-input::placeholder, .text-input::placeholder {
    opacity: 0.45;
}

.form-input:focus::placeholder, .text-input:focus::placeholder {
    opacity: 0.15;
}



/* i want to select any summary element child of id element "fullscreen-modal */

details[name="form"] > summary {
    font-size: 1.1rem;
    font-weight: 500;
}

article > figure {
    /* box-shadow: 0px 0px 2px var(--puny-black-box-shadow); */
}

article.grid-stack-item-content {
    gap: 15px;
    display: flex;
    padding: 20px;  /* Increased from 16px for better breathing room */
    border-radius: 24px !important;
    border: 0px solid #ccc;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);  /* Enhanced modern shadow */
    background-color: transparent;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;  /* Smooth interactions */
}

/* Modern hover effect for all cards */
article.grid-stack-item-content:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);  /* Lifted shadow on hover */
    transform: translateY(-2px);  /* Subtle lift effect */
}

article.grid-stack-item-content hgroup {
    width: 100%;
}

/* Link cards with images: hgroup should not take full width */
article.link-card:not(.no-image) hgroup {
    width: auto;
    flex: 1;  /* Take remaining space, share with figure */
}

/* Enhanced typography for card titles */
article.grid-stack-item-content hgroup > h6 {
    font-size: 17px !important;  /* Larger for better hierarchy */
    font-weight: 700 !important;  /* Bolder for emphasis */
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;  /* Tighter, more modern */
    margin-bottom: 6px !important;  /* Better spacing to description */
    color: var(--pico-color);
}

/* Enhanced typography for card descriptions */
article.grid-stack-item-content hgroup > p {
    font-size: 14px !important;
    line-height: 1.5 !important;  /* Better readability */
    color: rgba(0, 0, 0, 0.65) !important;  /* Improved contrast */
    margin: 0 !important;
}

div.grid-stack-item[gs-w="1"][gs-h="2"] {
    width: 100%;
}

div.grid-stack-item[gs-h="2"] article.grid-stack-item-content figure {
    overflow: hidden !important;
    width: 100%;
}
div.grid-stack-item[gs-h="2"] article.grid-stack-item-content {
    flex-direction: column;
}



div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.grid-stack-item-content figure.link-card-cover {
    display: none;
}


div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.post-card > figure,
div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.lead-card > figure,
div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.catalog-card > figure,
div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.shop-card > figure,
div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.paywall-card > figure,
div.grid-stack-item:not([gs-h]):not([gs-w]):not(:first-child) article.booking-card > figure {

    display: none;
}




div.grid-stack-item:first-child:not([gs-h]):not([gs-w]) article.grid-stack-item-content figure figcaption {
    display: none;
}

div.grid-stack-item:not([gs-h]):not([gs-w]) article.grid-stack-item-content hgroup.hgroup-w100 {
    width: 100%;
}

article.grid-stack-item-content figure {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    width: 100%;
}


/* Profile section figure styling removed - using new .profile-image-container class */


/* Modern icon styling for cards */
article.grid-stack-item-content hgroup > figure {
    border-radius: 12px !important;  /* More modern, refined from 25px */
    background-color: rgba(85, 166, 230, 0.1);  /* Subtle puny-blue tint */
    overflow: hidden;
    padding: 12px;  /* Increased from 10px */
    margin-bottom: 16px;  /* Reduced from 20px for tighter layout */
    aspect-ratio: 1;
    max-width: 48px;  /* Increased from 40px for better presence */
    min-width: 48px;
    height: 48px;
    text-align: center;
    color: var(--puny-blue);  /* Brand color for icons */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Icon hover effect */
article.grid-stack-item-content:hover hgroup > figure {
    background-color: rgba(85, 166, 230, 0.15);  /* Slightly stronger on hover */
    transform: scale(1.05);  /* Subtle grow effect */
}

@media screen and (max-width: 320px) {
    article.grid-stack-item-content hgroup > figure {
        margin-bottom: 10px;
        max-width: 30px;
    }
}



/* Icon images inside figure elements */
article.grid-stack-item-content hgroup > figure > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;  /* Refined from 10px */
}

/* Featured images (card images) - Modern treatment */
article.grid-stack-item-content > figure > img,
article.grid-stack-item-content figure.link-card-cover > img,
article.grid-stack-item-content figure img[alt*="image"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;  /* More refined, modern radius */
    transition: transform 0.2s ease;
}

/* Subtle image zoom on card hover */
article.grid-stack-item-content:hover > figure > img,
article.grid-stack-item-content:hover figure.link-card-cover > img {
    transform: scale(1.02);  /* Subtle zoom effect */
}


article.grid-stack-item-content figure.gallery-image-cover {
    width: 100% !important;
    height: -webkit-fill-available !important;
}

article.columns-record {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 10px;
    border: 0px solid #ccc;
    box-shadow: 0px 0px 2px var(--puny-black-box-shadow);
    background-color: transparent;
    overflow: hidden;
}   

article.article-direction {
    flex-direction: column;
 
}

article.gallery-card {
    padding: 0;
}

/* Responsive Link Card Rules for Hidden Elements */

/* When icon is hidden */
article.link-card.no-icon hgroup > h6 {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* When both icon and image are hidden - maximize text space */
article.link-card.no-icon.no-image {
    justify-content: center;
    align-items: center;
    text-align: center;
}

article.link-card.no-icon.no-image hgroup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

article.link-card.no-icon.no-image hgroup > h6 {
    -webkit-line-clamp: 4;
    line-clamp: 4;
    margin-bottom: 0.5rem;
}

article.link-card.no-icon.no-image hgroup > p {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* For vertical cards (gs-h="2") with no image */
div.grid-stack-item[gs-h="2"] article.link-card.no-image hgroup > p {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* For cards with only image hidden (icon visible) */
article.link-card.no-image:not(.no-icon) hgroup > p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Adjust gap when icon is hidden */
article.link-card.no-icon {
    gap: 10px;
}

/* Make the modal full-screen on mobile */
@media (max-width: 768px) {
    #modal {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        max-width: none;
        max-height: none;
        display: hidden;
        flex-direction: column;
    }
    
    #modal article {
        display: hidden;
        flex-direction: column;
        height: 100%;
        margin:0;
        padding:
    }
}

/* Ensure the header and footer are fixed, and only content scrolls */
#modal article header,
#modal article footer {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    
    
}

#modal article footer {
    bottom: 0;
    
}

/* Scrollable content */
#modal-content {
    background: white;
    border-radius: 24px 24px 0 0;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

/* Modal Form Body - iOS drawer style */
.modal-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.modal.slideover {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.modal.slideover.active {
    transform: translateX(0);
}

/* Sticky top menu */
.top-bar {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #0c2c5a;
    padding: 10px;
    color: white;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Profile section styling */

.profile-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;  /* Center content when no actions row */
    padding: 32px;  /* Increased from 24px for better breathing room */
    border-radius: 20px;  /* More modern, refined from 10px */
    overflow: hidden;
    cursor: pointer;
    gap: 20px !important;  /* Spacing for actions if present */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);  /* Subtle depth */
    transition: box-shadow 0.2s ease, transform 0.2s ease;  /* Smooth transitions */
    min-height: 140px;  /* Ensure consistent card height */
}

/* Profile main content row - Centered vertically for better balance */
.profile-main-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;  /* Center text vertically with image */
    flex: 1;
    gap: 24px;  /* Increased from 20px for better spacing */
    width: 100%;
}

/* Ensure figure elements in profile don't break layout */
.profile-section figure {
    margin: 0 !important;
    width: auto !important;
    box-shadow: none !important;
}

/* Profile image container - Enhanced sizing and styling */
.profile-image-container {
    width: 100px !important;  /* Increased from 80px for better presence */
    height: 100px !important;  /* Increased from 80px */
    min-width: 100px !important;
    max-width: 100px !important;
    border-radius: 16px;  /* More modern, refined from 12px */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* Enhanced shadow for depth */
    flex-shrink: 0;
    transition: transform 0.2s ease;  /* Smooth hover effect */
}

.profile-section .profile-image-container {
    position: relative !important;
    margin: 0 !important;
}

.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Subtle hover effect on image */
.profile-section:hover .profile-image-container {
    transform: scale(1.02);
}

/* Profile text content */
.profile-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Typography - Enhanced title styling */
.profile-title {
    font-size: 20px;  /* Increased from 18px for better hierarchy */
    font-weight: 700;  /* Slightly bolder from 600 */
    line-height: 1.2;  /* Tighter, more modern from 1.3 */
    letter-spacing: -0.01em;  /* Tighter tracking for modern look */
    margin: 0;
    color: var(--pico-color);
}

/* Typography - Enhanced description styling */
.profile-description {
    font-size: 14px;
    line-height: 1.5;  /* Improved readability from 1.4 */
    margin: 0;
    color: rgba(0, 0, 0, 0.65);  /* Better contrast than muted-color */
}

/* Profile actions row - Enhanced layout */
.profile-actions {
    display: flex;
    justify-content: flex-end;  /* Right-aligned for modern look */
    align-items: center;
    margin-top: auto;
    height: auto;  /* Allow natural height */
    padding-top: 4px;  /* Subtle spacing */
}

/* Social icons styling - Enhanced with better spacing and effects */
.profile-actions .social-icons {
    display: flex;
    gap: 16px;  /* Increased from 12px for better breathing room */
    align-items: center;
    cursor: pointer;
}

.profile-actions .social-icons i {
    font-size: 24px;  /* Increased from 22px for better visibility */
    transition: transform 0.2s ease, opacity 0.2s ease;  /* Enhanced transitions */
}

.profile-actions .social-icons i:hover {
    transform: scale(1.15);  /* More noticeable from 1.1 */
    opacity: 0.8;  /* Subtle fade on hover */
}

/* Default color for non-configured social icons */
.profile-actions .social-icons i:not([style*="color"]) {
    color: rgba(0, 0, 0, 0.25);
}

/* Website link button */
.profile-website-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--pico-primary-background);
    color: var(--pico-primary);
    border-radius: 50%;
    text-decoration: none;
    font-size: 24px;
    transition: all 0.2s ease;
}

.profile-website-link:hover {
    background-color: var(--pico-primary);
    color: white;
    transform: scale(1.05);
}

.profile-website-link span {
    display: inline-block;
    transform: translateX(1px);
}

/* Enhanced hover effect for entire profile card */
.profile-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);  /* Lifted shadow on hover */
    transform: translateY(-2px);  /* Subtle lift effect */
}

/* Additional fixes for profile layout */
.profile-section .truncate-3 {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Ensure profile actions stay at bottom */
.profile-section .profile-actions {
    width: 100%;
}

/* ============================================
   RESPONSIVE PROFILE CARD OPTIMIZATIONS
   ============================================ */

/* Tablet screens - moderate adjustments */
@media (max-width: 768px) {
    .profile-section {
        padding: 24px;  /* Reduce from 32px */
        min-height: 130px;
    }

    .profile-main-content {
        gap: 20px;  /* Reduce from 24px */
    }

    .profile-image-container {
        width: 90px !important;  /* Reduce from 100px */
        height: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }

    .profile-title {
        font-size: 19px;  /* Reduce from 20px */
    }
}

/* Mobile screens - optimize for smaller devices */
@media (max-width: 480px) {
    .profile-section {
        padding: 20px;  /* Further reduce to 20px */
        min-height: 120px;
        border-radius: 18px;  /* Slightly smaller radius */
    }

    .profile-main-content {
        gap: 16px;  /* Tighter gap for mobile */
    }

    .profile-image-container {
        width: 80px !important;  /* Back to original compact size */
        height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        border-radius: 14px;  /* Proportional radius */
    }

    .profile-title {
        font-size: 18px;  /* Mobile-friendly size */
        letter-spacing: -0.005em;  /* Less aggressive tracking */
    }

    .profile-description {
        font-size: 13px;  /* Slightly smaller but still readable */
        line-height: 1.4;
    }

    .profile-actions .social-icons i {
        font-size: 22px;  /* Smaller icons on mobile */
        padding: 8px;  /* Add padding for better tap targets */
    }

    .profile-actions .social-icons {
        gap: 14px;  /* Slightly tighter spacing */
    }
}

/* Very small mobile screens - maximum space efficiency */
@media (max-width: 320px) {
    .profile-section {
        padding: 16px;  /* Minimal padding */
        min-height: 110px;
    }

    .profile-main-content {
        gap: 14px;
    }

    .profile-image-container {
        width: 70px !important;  /* Compact for small screens */
        height: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        border-radius: 12px;
    }

    .profile-title {
        font-size: 16px;
    }

    .profile-description {
        font-size: 12px;
    }
}

/* ============================================
   RESPONSIVE GRID CARDS OPTIMIZATIONS
   ============================================ */

/* Mobile card adjustments */
@media (max-width: 480px) {
    article.grid-stack-item-content {
        padding: 16px;  /* Reduce from 20px on mobile */
        gap: 12px;  /* Tighter spacing */
    }

    article.grid-stack-item-content hgroup > h6 {
        font-size: 16px !important;  /* Slightly smaller titles */
    }

    article.grid-stack-item-content hgroup > p {
        font-size: 13px !important;  /* Compact descriptions */
    }

    article.grid-stack-item-content hgroup > figure {
        max-width: 42px;  /* Smaller icons */
        min-width: 42px;
        height: 42px;
        margin-bottom: 12px;
    }
}

/* Very small mobile screens */
@media (max-width: 320px) {
    article.grid-stack-item-content {
        padding: 14px;
    }

    article.grid-stack-item-content hgroup > h6 {
        font-size: 15px !important;
    }

    article.grid-stack-item-content hgroup > figure {
        max-width: 38px;
        min-width: 38px;
        height: 38px;
    }
}

.profile-picture {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0px 0px 2px var(--puny-black-box-shadow);
}

/* Floating menu styling */
.floating-menu {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    /* background-color: #E0E0E0; */
    background-color: var(--puny-blue);
    padding: 10px 55px;
    width: 85%;
    border-radius: 28px;
    /* color: rgba(0, 0, 0, 0.35); */
    color: rgba(255, 255, 255, 0.9);
    z-index: 998;
    max-width: 450px;
}

.floating-menu button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .4rem 0.85rem;
}

.floating-menu span {
    font-weight: 700;
    font-size: 0.875rem;
}

/* Old control styles removed - replaced with drawer/modal system */

/* Ensure grid items are clickable */
.grid-stack-item {
    overflow: visible !important;
}

.grid-stack-item-content {
    cursor: pointer;
    overflow: visible !important;
}

/* Drag handle styles - corner grip icon */
.grid-drag-handle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    cursor: move;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #55a6e6;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    user-select: none;
    pointer-events: auto;
}

.grid-stack-item:hover .grid-drag-handle {
    opacity: 1;
}

.grid-card-removing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}

.grid-actions {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0.25rem 1rem;
    justify-content: center;
}

.grid-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: #2b2b2b;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.grid-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.1);
}

.grid-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.grid-action-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.grid-action-icon-secondary {
    opacity: 0.7;
    transform: translateX(-6px) scale(0.9);
}

.grid-action-label {
    display: inline-flex;
}

.grid-action-share {
    background: linear-gradient(135deg, #55a6e6 0%, #4a9cd6 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

.grid-action-share .grid-action-icon svg,
.grid-action-share .grid-action-icon path {
    fill: #ffffff;
}

.grid-action-settings {
    background: #f8f9fb;
    color: #2c2c2c;
}

@media (max-width: 480px) {
    .grid-action-btn {
        padding: 0.55rem 0.8rem;
        font-size: 0.85rem;
    }

    .grid-action-label {
        display: none;
    }
}

.share-option-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
}

.share-option-btn:hover {
    background: #f6f7f9;
}

.share-qr-container {
    margin-top: 1.5rem;
    text-align: center;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 10px;
}

.share-qr-container.hidden {
    display: none;
}

.confirmation-message {
    display: none;
    flex-direction: column;
    width: 90%;
    position: sticky;
    bottom: 5vh;
    border-radius: 18px;
    align-items: center;
    justify-content: center;
    padding: 14px 18px;
    font-weight: 600;
    color: #fff;
    z-index: 9999;
    margin: 0 auto;
}

.video-widget-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-widget-container .yt-embed,
.video-widget-container .yt-iframe-wrap,
.video-widget-container .video-embed-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-widget-container .video-embed-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    display: block;
}

/* control-btn styles removed - using drawer/modal action buttons instead */


@media and (min-width: 800px) {

}


.grid-stack-item>.ui-resizable-se {
    width: 2.5rem;
    height: 2.5rem;
    background-size: 55%;
    background-position: bottom 5px center;
    opacity: 0.5;
    right: 10px !important; ;
    bottom: 10px !important;
}

/* Styling for gallery image cover */
.gallery-image-cover {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
    text-align: center;
    background: #00000044
}

.gallery-card .gallery-image-cover {
    background: white;
}

/* Image styling */
.gallery-image-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.gallery-image-cover p,
.gallery-image-cover h3,
.gallery-image-cover h4 {
    color: var(--pico-color-azure-50);
}

/* Modern caption overlay styling */
.gallery-image-cover-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;  /* Full width */
    color: white;
    padding: 32px 16px 16px;  /* More breathing room */
    border-radius: 0 0 10px 10px;  /* Match parent radius */
    font-size: 15px;  /* Slightly larger */
    font-weight: 600;  /* Better readability */
    text-align: left;  /* Left-aligned for modern look */
    line-height: 1.4;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.05), transparent);  /* Smoother gradient */
    backdrop-filter: blur(4px);  /* Subtle blur effect for modern feel */
}

.gallery-image-cover-caption h5,
.gallery-image-cover-caption h6 {
    color: #ffffff !important;
}

.image-caption-card {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: rgba(15, 18, 24, 0.85);
    color: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(6px);
    text-align: center;
}

.image-caption-text {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}


/* Styling for gallery image cover */
.widget-image-cover {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Image styling */
.widget-image-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.widget-image-cover p, h3, h4 {
    color:var(--pico-color-azure-50)
}

/* Caption overlay styling */
.widget-image-cover-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: rgba(1, 49, 67, 0.9); /* Background with transparency */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    max-width: calc(100% - 40px); /* Avoids going outside the card */
}

/* Full-page aside styling */
aside.full-page-aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color, #fff);
    z-index: 1000;
    display: none; /* Hide initially */
    padding: 2rem;
    overflow-y: auto;
}

aside.full-page-aside.show {
    display: block;
}

/* Aside transition */
.aside-transition {
    transition: all 0.3s ease;
}

/* Close button styling */
aside.full-page-aside .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
}


.modal-is-open {
    overflow: hidden;
}
.modal-is-opening, .modal-is-closing {
    transition: opacity 0.3s ease;
}
.modal-is-opening {
    opacity: 1;
}
.modal-is-closing {
    opacity: 0;
}


.add-card-widget {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #55A6E6; /* Customize the color for the Add button */
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  
  .add-card-widget:hover {
    background-color: #4B97D5; /* Darken the color on hover */
    transform: scale(1.05); /* Slight zoom effect */
  }
  
  .add-card-widget::after {
    content: "+ Add New Card";
  }
  

  /* Fix dialog positioning to prevent bottom-corner appearance */
  dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    max-width: min(600px, 90vw) !important;
    max-height: min(85vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px)) !important;
    overflow: visible !important;
  }
  
  dialog[open] {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Ensure dialog content respects max-height */
  dialog.modal-form-dialog > * {
    max-height: 100%;
    /* Remove overflow hidden to allow sticky positioning to work */
  }
  /* Allow responsive drawer/sheet behavior for edit cards */
  /* Template-level media queries will handle positioning */
  dialog.modal-form-dialog {
    position: fixed !important;
    /* Don't force centering - let template CSS handle it */
  }

  /* Backdrop styling */
  dialog.modal-form-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
  }
  
  .dialog > article {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Ensures content stacks vertically */
    overflow: hidden; /* Allows scrolling if content overflows */
    padding: 1rem; /* Optional padding */
  }
  
  .dialog > article > header,
  .dialog > article > footer {
    flex-shrink: 0; /* Ensures header and footer remain visible */
  }
  
  .dialog > article > section {
    flex-grow: 1; /* Makes the content area expand */
    overflow-y: auto; /* Scrollable content */
  }



  #editorjs {
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 300px; /* Adjust for mobile screens */
    width: 100%; /* Ensures full width on mobile */
    box-sizing: border-box;
    overflow-y: auto; /* Adds scroll for long content */
    background: #fff; /* Ensure background is visible */
}

.ce-toolbar__content {
    flex-wrap: wrap; /* Ensures tools wrap on smaller screens */
}

.ce-toolbar__actions {
    position: fixed;
    bottom: 10px; /* Toolbar at the bottom of the screen */
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* Adjust width for better usability */
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.ce-inline-toolbar__button {
    padding: 10px; /* Larger touch target */
    margin: 5px; /* Adds spacing between buttons */
}


.text-card a {
    color: inherit;
    text-decoration: none;
}

.text-card-font-size-small, .text-card-font-size-small p {
    font-size: 1rem;
    font-weight: 800;
}

.text-card-font-size-medium, .text-card-font-size-medium p  {
    font-size: 2rem;
    font-weight: 800;
}

.text-card-font-size-large, .text-card-font-size-large p  {
    font-size: 4rem;
    font-weight: 800;
}

.text-card-font-size-extra-large , .text-card-font-size-extra-large p {
    font-size: 5rem;
    font-weight: 800;
}


.previous-image img {
    max-height: 15vw;
}



.next-image img {
    max-height: 15vw;
}


.current-image img {
    max-height: 30vw;
}

#popup-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.60);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

#popup-message-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 3rem 1rem 2.5rem;
    gap: 2.5rem;
    width: 85%;
    max-width: 600px;
}

#popup-message {
    width: 75%;
    text-align: center;
    opacity: 0.75;
    font-size: 1.2rem;
}

#popup-button {
    padding: 1rem 3rem;
    background-color: var(--puny-blue);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    color: #2A577A;
}

.previous-image img {
    max-height: 15vw;
}



.next-image img {
    max-height: 15vw;
}


.current-image img {
    max-height: 30vw;
}


@media screen and (max-width: 800px) {
    .previous-image img {
        max-height: 10vw;
    }
    
    .next-image img {
        max-height: 10vw;
    }
    
    .current-image img {
        max-height: 25vw;
    }

    
    
}

@media screen and (max-width: 500px) {
    input.form-input:is([type='text'], [type='password'], [type='email'], [type='number'], [type='tel'], [type='url'], [type='search']), .form-input[custom-form-input], select.form-input {
        max-height: 56px;
    }
}

@media screen and (max-width: 320px) {
        
    .gs-id-0 > .grid-stack-item > .grid-stack-item-content {
        inset: 7px !important;
    }
}




.text-widget {
    overflow: hidden;

}

.text-widget a {
    text-decoration: none;
    color: inherit !important;
}


/* Alpine related rules */

[x-cloak] {
    display: none !important; 
}

/* Fix for controls visibility - ensure overflow is visible when controls are shown */
.grid-stack-item.controls-visible article.grid-stack-item-content {
    overflow: visible !important;
}

/* Ensure controls container is not clipped */
.grid-stack-item.controls-visible {
    overflow: visible !important;
    z-index: 999;
}

/* ============================================
   RESPONSIVE NAVBAR LOGO
   ============================================ */

/* Desktop: Full size logo */
@media (min-width: 1200px) {
    .navbar-logo {
        height: 40px !important;
        max-width: 200px !important;
    }
}

/* Laptop: Slightly smaller */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-logo {
        height: 36px !important;
        max-width: 180px !important;
    }
}

/* Tablet: Medium size */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar-logo {
        height: 32px !important;
        max-width: 160px !important;
    }
}

/* Mobile: Compact size */
@media (max-width: 767px) {
    .navbar-logo {
        height: 28px !important;
        max-width: 140px !important;
    }
}

/* ========================================================================
   CARD ACTIONS DRAWER/MODAL SYSTEM
   ======================================================================== */

/* Backdrop - Full screen overlay */
.card-actions-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: flex-end; /* Mobile: align to bottom */
    justify-content: center;
    pointer-events: auto; /* Ensure backdrop captures clicks */
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* Drawer/Modal Container - Mobile: Bottom sheet, Desktop: Right side panel */
.card-actions-drawer {
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease-out;
    position: fixed;
    z-index: 1001;
}

/* Mobile: Slide from bottom */
@media (max-width: 768px) {
    .card-actions-drawer {
        border-radius: 24px 24px 0 0;
        width: 100%;
        max-height: 85vh;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(100%);
    }

    /* Drawer Open State - Mobile */
    .card-actions-drawer.card-actions-drawer-open {
        transform: translateY(0);
    }
}

/* Desktop: Slide from right */
@media (min-width: 769px) {
    .card-actions-drawer {
        top: 0;
        right: 0;
        bottom: 0;
        width: 480px;
        max-width: 90vw;
        border-radius: 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
    }

    /* Drawer Open State - Desktop */
    .card-actions-drawer.card-actions-drawer-open {
        transform: translateX(0);
    }
}

/* iOS-style Drawer Header */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e0e0e0;
    background: white;
    flex-shrink: 0;
    min-height: 60px;
    position: relative;
}

.drawer-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #007AFF;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
}

.drawer-done-btn {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--puny-blue, #007AFF);
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    width: fit-content !important;
    min-width: auto !important;
    max-width: fit-content !important;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Make button content inline to prevent width changes */
.drawer-done-btn .htmx-indicator,
.drawer-done-btn .htmx-indicator-hidden {
    display: inline;
}

/* HTMX loading state management */
.drawer-done-btn .htmx-indicator {
    display: none;
}

.drawer-done-btn.htmx-request .htmx-indicator {
    display: inline;
}

.drawer-done-btn.htmx-request .htmx-indicator-hidden {
    display: none;
}

.drawer-done-btn:hover {
    background: #0051D5;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.4);
}

.drawer-done-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 2px rgba(0, 122, 255, 0.3);
}

/* iOS-style Section Headers */
.section-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.4);
    margin: 0 0 0.8rem 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0 0.25rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========================================================================
   FLOATING RESIZE CONTROLS
   ======================================================================== */

/* Glassmorphism floating container */
.resize-controls-floating {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.card-actions-drawer-open ~ .resize-controls-floating {
    opacity: 1;
    pointer-events: auto;
}

/* Grid layout for 4 resize buttons */
.resize-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Individual resize buttons */
.resize-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.25rem;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%);
    border: 2px solid rgba(85, 166, 230, 0.2);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 90px;
    min-height: 90px;
    box-shadow:
        0 4px 12px rgba(85, 166, 230, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.resize-btn:hover {
    background: linear-gradient(135deg,
        rgba(85, 166, 230, 0.15) 0%,
        rgba(85, 166, 230, 0.08) 100%);
    border-color: var(--puny-blue, #55a6e6);
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 8px 24px rgba(85, 166, 230, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.resize-btn:active {
    transform: translateY(-2px) scale(1.02);
}

/* ========================================================================
   SAFARI-STYLE HORIZONTAL ACTION ROW (Edit, Copy, Delete)
   ======================================================================== */

/* Container for horizontal action row */
.action-row-container {
    background: #f7f8fa;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.65rem 0.5rem;
}

/* Horizontal scrollable row */
.action-row-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
.action-row-scroll::-webkit-scrollbar {
    display: none;
}

.action-row-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Individual action row items */
.action-row-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.65rem;
    background: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.action-row-item:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-row-item:active {
    transform: translateY(0);
}

.action-row-item span {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    whitespace: nowrap;
}

/* Visual shape representations of card sizes */
.resize-shape {
    border: 2px solid rgba(85, 166, 230, 0.3);
    border-radius: 8px;
    background: linear-gradient(135deg,
        rgba(85, 166, 230, 0.25) 0%,
        rgba(85, 166, 230, 0.15) 100%);
    margin-bottom: 0.5rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 2px 6px rgba(85, 166, 230, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 1×1 - Small square */
.resize-shape-1x1 {
    width: 24px;
    height: 24px;
}

/* 2×2 - Large square */
.resize-shape-2x2 {
    width: 36px;
    height: 36px;
}

/* 2×1 - Wide rectangle */
.resize-shape-2x1 {
    width: 36px;
    height: 18px;
}

/* 1×2 - Tall rectangle */
.resize-shape-1x2 {
    width: 18px;
    height: 36px;
}

/* Hover effect for resize shapes in action row */
.action-row-item:hover .resize-shape {
    background: linear-gradient(135deg,
        rgba(85, 166, 230, 0.45) 0%,
        rgba(85, 166, 230, 0.35) 100%);
    border-color: var(--puny-blue, #55a6e6);
    transform: scale(1.12);
    box-shadow:
        0 4px 12px rgba(85, 166, 230, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Action icons (Edit, Copy, Delete) */
.action-icon {
    width: 28px;
    height: 28px;
    fill: #000000;
    stroke: none;
    flex-shrink: 0;
    transition: all 0.2s ease;
    display: block;
    opacity: 0.85;
}

.action-row-item:hover .action-icon {
    opacity: 1;
    transform: scale(1.05);
}

/* Ensure SVG icons render properly */
.action-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.action-icon path,
.action-icon g {
    fill: #000000;
}

/* Danger action styling (Delete button) */
.action-row-item-danger {
    background: white;
}

.action-row-item-danger:hover {
    background: #fff5f5;
}

.action-row-item-danger span {
    color: var(--puny-red, #ff5c57);
}

.action-row-item-danger .action-icon {
    fill: var(--puny-red, #ff5c57);
}

.action-row-item-danger .action-icon path,
.action-row-item-danger .action-icon g {
    fill: var(--puny-red, #ff5c57);
}

/* ================================
   CARD DETAILS SECTION STYLES
   ================================ */

/* Card Details Container */
.card-details-section {
    border-bottom: 1px solid #e0e0e0;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Metadata Display Section */
.card-metadata {
    padding: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.metadata-header {
    margin-bottom: 1rem;
}

.metadata-header h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Metadata Items */
.metadata-item {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.metadata-label {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    min-width: 80px;
}

.metadata-value {
    color: rgba(0, 0, 0, 0.8);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Type Badge */
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #f0f0f0;
    color: rgba(0, 0, 0, 0.7);
}

.type-badge-text {
    background: rgba(85, 166, 230, 0.1);
    color: #2c5aa0;
}

.type-badge-link {
    background: rgba(76, 208, 182, 0.1);
    color: #1a8070;
}

.type-badge-image {
    background: rgba(255, 92, 87, 0.1);
    color: #c43b35;
}

.type-badge-gallery {
    background: rgba(255, 152, 0, 0.1);
    color: #e65100;
}

.type-badge-blog {
    background: rgba(156, 39, 176, 0.1);
    color: #6a1b9a;
}

.type-badge-post {
    background: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
}

.type-badge-shop {
    background: rgba(33, 150, 243, 0.1);
    color: #1565c0;
}

.type-badge-catalog {
    background: rgba(244, 67, 54, 0.1);
    color: #c62828;
}

.type-badge-lead {
    background: rgba(0, 150, 136, 0.1);
    color: #00695c;
}

.type-badge-paywall {
    background: rgba(63, 81, 181, 0.1);
    color: #283593;
}

/* URL Display and Copy Button */
.card-url-code {
    display: inline-block;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 0.3rem 0.6rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
    word-break: break-all;
    max-width: 200px;
}

.copy-url-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.copy-url-btn:hover {
    background: #f8f9fa;
    border-color: #55a6e6;
    transform: scale(1.05);
}

.copy-url-btn:active {
    transform: scale(0.95);
}

/* Quick Edit Fields Section */
.quick-edit-fields {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-edit-header {
    margin-bottom: 0.5rem;
}

.quick-edit-header h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Elements */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
}

.form-input {
    padding: 0.6rem 0.8rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #55a6e6;
    box-shadow: 0 0 0 3px rgba(85, 166, 230, 0.1);
}

.form-input:invalid {
    border-color: #ff5c57;
}

/* Character Count */
.char-count {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    text-align: right;
}

/* Toggle Switches */
.toggle-switches {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    user-select: none;
}

.toggle-switch input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 48px;
    height: 28px;
    background: #ccc;
    border-radius: 14px;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: var(--puny-green, #4cd0b6);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
    left: 22px;
}

.toggle-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.8);
}

/* Save Button */
.save-quick-edits-btn {
    padding: 0.8rem 1.2rem;
    border: none;
    background: var(--puny-green, #4cd0b6);
    color: white;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.save-quick-edits-btn:hover:not(:disabled) {
    background: #3ab89f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 208, 182, 0.3);
}

.save-quick-edits-btn:active:not(:disabled) {
    transform: translateY(0);
}

.save-quick-edits-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ddd;
    color: #999;
}

.save-quick-edits-btn.is-saving {
    opacity: 0.8;
}

/* Advanced Options Section */
.advanced-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.advanced-toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(85, 166, 230, 0.05);
    border: 1px solid rgba(85, 166, 230, 0.2);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--puny-blue, #55a6e6);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.advanced-toggle:hover {
    background: rgba(85, 166, 230, 0.1);
    border-color: var(--puny-blue, #55a6e6);
}

.advanced-toggle span:first-child {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.advanced-content {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

.vanity-input-simple {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.vanity-input-simple .url-prefix {
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    border-right: 1px solid #d0d0d0;
    white-space: nowrap;
}

.vanity-input-simple .form-input {
    flex: 1;
    border: none;
    border-radius: 0;
    margin: 0;
}

/* Card Image Preview */
.card-image-preview-container {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(85, 166, 230, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card-image-preview-container:hover {
    border-color: var(--puny-blue, #55a6e6);
    box-shadow: 0 4px 16px rgba(85, 166, 230, 0.25);
    transform: translateY(-2px);
}

.card-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.card-image-preview-container:hover .card-image-preview {
    transform: scale(1.05);
}

.image-preview-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image-preview-container:hover .image-preview-overlay {
    opacity: 1;
}

.image-preview-overlay span {
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.image-size-guide {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Desktop: Adjust card details section */
@media (min-width: 768px) {
    .card-details-section {
        max-height: 400px;
        border-right: 1px solid #e0e0e0;
    }

    .card-metadata {
        padding: 1.8rem;
    }

    .quick-edit-fields {
        padding: 1.8rem;
        gap: 1.2rem;
    }

    .metadata-item {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
}

/* Desktop: Center Modal */
@media (min-width: 768px) {
    .card-actions-backdrop {
        align-items: center; /* Center vertically */
    }

    /* Floating resize controls - Desktop */
    .resize-controls-floating {
        bottom: auto;
        top: calc(50% - (40vh + 100px)); /* Float above centered modal */
        transform: translateX(-50%) translateY(-20px);
    }

    .card-actions-backdrop:not(.card-actions-backdrop-hidden) .resize-controls-floating {
        transform: translateX(-50%) translateY(0);
    }

    /* Desktop drawer styles now defined in main .card-actions-drawer block above (side sheet) */

    /* Desktop: Slightly larger action buttons */
    .action-btn {
        padding: 1.2rem;
        font-size: 1.05rem;
    }

    /* Desktop: More spacing in resize grid */
    .resize-grid {
        gap: 0.8rem;
    }

    .resize-btn {
        padding: 1rem 0.8rem;
    }
}

/* Backdrop Hidden State */
.card-actions-backdrop.card-actions-backdrop-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}